Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2017
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to set a countdown in realtime in HTML/javascript

    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:
    Code:
    <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.
    Thank you.

  2. #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    147
    Thanks
    0
    Thanked 47 Times in 45 Posts
    Does this work as you intend?
    Code:
    <span id="dday"></span> d <span id="dhour"></span> h <span id="dmin"></span> min <span id="dsec"></span> sec
    <div id="count2"></div>
    
    <script>
    var now = new Date;
    var countTo = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 19, 10));
    //var countTo = new Date(Date.UTC(2017, 0, 15, 19, 10));
    //var countTo = new Date(Date.UTC(2017, 0, 1, 0, 0));
    
    window.setInterval(countdown(countTo, displayCounter), 500);
    
    function countdown(countTo, callback) {
      var diff = countTo - new Date,
          days = Math.floor(Math.abs(diff) / 864e5),
          hours = Math.floor(Math.abs(diff) % 864e5 / 36e5),
          mins = Math.floor(Math.abs(diff) % 864e5 % 36e5 / 6e4),
          secs = Math.floor(Math.abs(diff) % 864e5 % 36e5 % 6e4 / 1000);
    
      callback(diff, days, hours, mins, secs);
      return countdown.bind(null, countTo, callback);
    };
    
    function displayCounter(diff, days, hours, mins, secs) {
      if(diff < 0) {
        document.getElementById('count2').innerHTML = 'passed';
      } else {
        document.getElementById('count2').innerHTML = 'away';
      }
    
      document.getElementById('dday').innerHTML = days;
      document.getElementById('dhour').innerHTML = hours;
      document.getElementById('dmin').innerHTML = mins;
      document.getElementById('dsec').innerHTML = secs;
    };
    
    </script>


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •