How to set a countdown in realtime in HTML/javascript

Question

0.00/5 (No votes)

See more:

Hello, I want to do a countdown and put it in my website. I did a countdown but I have a problem, when I launch it, the seconds are freezing they are not anymore running... So the countdown is not in realtime anymore...
Here is what I did:

HTML

<span id="dhour"></span> h <span id="dmin"></span> min <span id="dsec"></span> sec
<div id="count2"></div>
<div class="numbers" id="dday" hidden="true"></div>
<script>
    var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var year;
    var month;
    var day;
    var hour = 19;
    var minute = 10;
    var tz = 0;
    var ladate;
    var today;

    function myCallback(json) {

        ladate = new Date(json.dateString);

        year = ladate.getFullYear();
        month = ladate.getMonth() + 1;
        day = ladate.getDate();
        countdown(year, month, day, hour, minute);
    }

    function countdown(yr, m, d, hr, min) {
        theyear = yr;
        themonth = m;
        theday = d;
        thehour = hr;
        theminute = min;
        today = ladate;
        var todayy = today.getYear();
        if (todayy < 1000) {
            todayy += 1900;
        }

        var todaym = today.getMonth();
        var todayd = today.getDate();
        var todayh = today.getHours();
        var todaymin = today.getMinutes();
        var todaysec = today.getSeconds();
        var todaystring1 = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
        var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60);
        var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr + ":" + min);
        var futurestring = Date.parse(futurestring1) - (today.getTimezoneOffset() * (1000 * 60));
        var dd = futurestring - todaystring;
        var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
        var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
        var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
        var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);

        if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) {
            document.getElementById('count2').style.display = "inline";
            document.getElementById('after').style.display = "none";

            document.getElementById('dday').style.display = "none";
            document.getElementById('dhour').style.display = "none";
            document.getElementById('dmin').style.display = "none";
            document.getElementById('dsec').style.display = "none";
            document.getElementById('days').style.display = "none";
            document.getElementById('hours').style.display = "none";
            document.getElementById('minutes').style.display = "none";
            document.getElementById('seconds').style.display = "none";
            return;
        } else {
            document.getElementById('count2').style.display = "none";
            document.getElementById('dday').innerHTML = dday;
            document.getElementById('dhour').innerHTML = dhour;
            document.getElementById('dmin').innerHTML = dmin;
            document.getElementById('dsec').innerHTML = dsec;
            setTimeout("countdown(theyear,themonth,theday,thehour,theminute)", 1000);
        }
    }
</script>
<script type="text/javascript" src="http://www.timeapi.org/utc/now.json?callback=myCallback"></script>

Thank you.

What I have tried:

I tried but didn't find a solution...

Posted 9-Jan-17 5:09am

TatsuSheva

Updated 10-Jan-17 7:28am

Add a Solution

Comments

ZurdoDev 9-Jan-17 12:17pm

Debug it. Find out what is happening.

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bob@work · Answer 1 · 2017-01-09T09:28:00

I'm not sure what the timeapi.org is doing, but the countdown appears to be based on two declarations of the same time:

JavaScript

ladate = new Date(json.dateString);

and

JavaScript

today = ladate;

Also, the future date is subtracts one from the next month, setting it to the current month, resulting in the code never reaching the timeout call

JavaScript

var futurestring1 = (montharray[m - 1] + " " + d + ", " + yr + " " + hr + ":" + min);

By changing the second time variable to the current time and not subtracting 1 from the future date,

JavaScript

today = new Date();
var futurestring1 = (montharray[m - 0] + " " + d + ", " + yr + " " + hr + ":" + min);

The countdown starts to function by calculating the difference between the future time (latime) and the current time (today).

-----------

Also, the objects with the objectid's [days, hours, minutes, seconds] are missing from the html code provided. and prevent the code from failing properly.

Bob@work · Answer 2 · 2017-01-10T07:28:00

OK, I think I understand the question - the call to timeapi.org returns the current time according to the timeapi server. You're then using that time create a future time, one month in the future at 7:10 pm. The "current" time (latime, today, and todaystring) is never incremented once created, so the countdown is always comparing the future time to an unchanging current time.

To avoid using a local user clock (that can be changed) to get the current time, you can either make a new ajax call to timeapi.org for the trusted current time, realizing there will be a lag, or increment the original current time locally in the script.

In my experience, incrementing on the client machine may lag behind the true time, depending on the client machine capabilities and computing load, especially over long time periods.

I've added a few progress messages that display various variables as the script runs to show where the current time and future time are compared and might be incremented.

HTML

<html><head><title>countdown</title></head><body>

<span id="dday">days</span> d <span id="dhour">hours</span> h <span id="dmin">minutes</span> min <span id="dsec">seconds</span> sec
<div id="count2">id=count2</div>
<div class="numbers" id="dday" hidden=true >id=dday</div>
<hr />
<div id="debug"></div>
<script>
    var montharray = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var year;
    var month;
    var day;
    var hour = 19;
    var minute = 10;
    var tz = 0;
    var ladate;
    var today;

	 var bugbox;
	 
	 
    function myCallback(json) {

		bugbox=document.getElementById("debug");
		
		
		ladate = new Date(json.dateString);

        year = ladate.getFullYear();
        month = ladate.getMonth() + 1;
        day = ladate.getDate();
		  
		  bugbox.innerHTML+='<p>ladate= '+ladate+'</p>';
		  
		  bugbox.innerHTML+='<p>1. year, month, day, hour, minute= '+year+','+month+','+day+','+hour+','+minute+'</p>';
		  
        countdown(year, month, day, hour, minute);
    }

    function countdown(yr, m, d, hr, min) {
        theyear = yr;
        themonth = m;
        theday = d;
        thehour = hr;
        theminute = min;
		  
        today = ladate;
		  
		  today=new Date(yr,m-1,d,hr,min);
		  
		  bugbox.innerHTML+='<p>today= '+today+'</p>';
        var todayy = today.getYear();
        if (todayy < 1000) {
            todayy += 1900;
        }

        var todaym = today.getMonth();
        var todayd = today.getDate();
        var todayh = today.getHours();
        var todaymin = today.getMinutes();
        var todaysec = today.getSeconds();
        var todaystring1 = montharray[todaym-0] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
        var todaystring = Date.parse(todaystring1) + (tz * 1000 * 60 * 60);
        var futurestring1 = (montharray[m - 0] + " " + d + ", " + yr + " " + hr + ":" + min);
		  
		  bugbox.innerHTML+='<p>2. todaystring1= '+todaystring1+'</p>';
        bugbox.innerHTML+='<p>3. futurestring1= '+futurestring1+'</p>';
        
		  var futurestring = Date.parse(futurestring1) - (today.getTimezoneOffset() * (1000 * 60));
        var dd = futurestring - todaystring;
        var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
        var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
        var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
        var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);

        if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) {
		  
		  bugbox.innerHTML+='<p>ERR: '+dday+','+dhour+','+dmin+','+dsec+'</p>';
            document.getElementById('count2').style.display = "inline";
            //document.getElementById('after').style.display = "none";

            document.getElementById('dday').style.display = "none";
            document.getElementById('dhour').style.display = "none";
            document.getElementById('dmin').style.display = "none";
            document.getElementById('dsec').style.display = "none";
            /***
				document.getElementById('days').style.display = "none";
            document.getElementById('hours').style.display = "none";
            document.getElementById('minutes').style.display = "none";
            document.getElementById('seconds').style.display = "none";
				***/
            return;
        } else {
            document.getElementById('count2').style.display = "none";
            document.getElementById('dday').innerHTML = dday;
            document.getElementById('dhour').innerHTML = dhour;
            document.getElementById('dmin').innerHTML = dmin;
            document.getElementById('dsec').innerHTML = dsec;
            setTimeout("countdown(theyear,themonth,theday,thehour,theminute)", 1000);
				
				bugbox.innerHTML+='<p>4. dday, dhour, dmin, dsec= '+dday+','+dhour+','+dmin+','+dsec+'</p>';
				
        }
    }
</script>
<script type="text/javascript" src="http://www.timeapi.org/utc/now.json?callback=myCallback"></script>

</body></html>

How to set a countdown in realtime in HTML/javascript

2 solutions

Solution 2

Solution 3

Add your solution here

Preview 0

How to set a countdown in realtime in HTML/javascript

2 solutions

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us