dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to set a countdown in realtime in HTML/javascript

  1. #1
    Join Date
    Jan 2017
    Posts
    1

    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
    Join Date
    Dec 2012
    Posts
    1,241
    Did you write this code on your own or did you find it somewhere in the web?

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,444
    Your issue is the way in which you are counting and the type of event timer you are using.

    With something that is happening at a regular interval, you will need to use the setInterval() even timer to call the update routines

    When calculating time, you only need to use the Date() object to get a UTC time string and then slice out the data you need for the hours, minutes and seconds, you don't need to track variables and do complicated calculations on them.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Jan 2017
    Posts
    2
    It is better to use Regular JavaScript rather than Json

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,444
    You don't need to use variables to track time elements like in the above example.

    You will find the script here : http://www.webdeveloper.com/forum/sh...09#post1493009 found in this thread : ( http://www.webdeveloper.com/forum/sh...time-i-Refresh ) gives you an example of how to create a count down timer that uses the Date object to do two things, create a formatted HH:MM:SS string and properly evaluate the remaining time.

    This can be expanded to a more longer countdown that accounts for years, months, days by the same use of existing Date object methods.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles