How to set a countdown in realtime in HTML/javascript

JavaScript
1

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:

<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.

2

The problem is being caused by your json call. You are activating the callback only once when the page loads. From then on the captured date and time does not change. You can solve your problem by using the captured date object as the basis for your countdown. The following script is using this method. A shortcoming is that it counts down from the current time, rather than from a time that you set, but you should be able to modify it if that is what you need…

<div id="wrap">
  <span id="dhour"></span>h <span id="dmin"></span>min <span id="dsec"></span>sec
  <div id="count2">
  </div>
 </div>
<script type="text/javascript">
    var ladate, cnt=0;
 // captures current date and time
    function myCallback(json) { 
        ladate = new Date(json.dateString);
        setInterval(countDown,1000);
      }
 // -------    
 // reduces captured date and time by 1 second  
   function countDown(){  
   var year, month, day, hour, min, sec;   
   ladate.setSeconds(ladate.getSeconds() - 1);
   year = ladate.getFullYear();
   month = ladate.getMonth() + 1;
   day = ladate.getDate();
   hour = ladate.getHours();
   hrObj.innerHTML=hour; 
   min = ladate.getMinutes();
   minObj.innerHTML=min; 
   sec = ladate.getSeconds();
   secObj.innerHTML=sec; 
 }
// ------
var hrObj=document.getElementById("dhour");
var minObj=document.getElementById("dmin");
var secObj=document.getElementById("dsec");    
</script>
<script type="text/javascript" src="http://www.timeapi.org/utc/now.json?callback=myCallback">
</script>
3

I need to fix a time for the countdown for example the countdown must do the count till 10:10:00 am

4

By this do you mean 10:00am on the same day? If you mean a following day you will need to input a final date.

Also, why are you using the json callback at all? Javascript allows you to get the current date and time, so you could avoid the callback and still get the right answer.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.