Search code examples
javascripthtmltimerresetcountdown

Countdown reset on specific time


Currently I have a script, which has a countdown for a specific date, but I want the countdown to be specific on a timer, so let's say if I start the timer and I have set the timer to run for 30 days, it will then run for 30 days and then reset back to 30 days again and start running. Is it possible to change it to do so?

My code:

    <body>

    <span id="countdown"></span>

    <script LANGUAGE="Javascript">

    // set the date we're counting down to
    var target_date = new Date("Apr 9, 2015").getTime();

    // variables for time units
    var days, hours, minutes, seconds;

    // get tag element
    var countdown = document.getElementById("countdown");

    // update the tag with id "countdown" every 1 second
    setInterval(function () {

        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;

        // do some time calculations
        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        // format countdown string + set tag value
        countdown.innerHTML = days + "d, " + hours + "h, "
        + minutes + "m, " + seconds + "s";  

    }, 1000);

</script>

</body>

EDIT:

I have now changed the code to look like underneath, but now when I open the website in my browser its blank.

New code:

<span id="countdown"></span>

<script LANGUAGE="Javascript">

// set the date we're counting down to
var target_date = new Date("Apr 9, 2015").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdown = document.getElementById("countdown");


if (seconds_left <= 0){
        target_date = target_date + 30 days;
    }


// update the tag with id "countdown" every 1 second
setInterval(function () {

// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;

// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;

hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;

minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);

// format countdown string + set tag value
countdown.innerHTML = days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";  

}, 1000);


Solution

  • I really advice you to take advantage of JavaScript libraries , in your case moment JS is the perfect solution, you can check their documentation and see how you can manage time easily. Anyways here is the solution of your question using moment js.

    First download moment js and add it to your page.

    HTML CODE

        <span id="days"> </span> 
        <span id="hours"></span>
        <span id="minutes"></span> 
        <span id="seconds"></span>
    

    It can not get simple than that :)

    JAVASCRIPT

     //create two variables for holding the date for 30 back from now using    substract
    
    var back30Days = moment().subtract(30, 'days').format('YYYY-MM-DD H:mm:ss');
       var countDownSeconds = Math.floor(moment().diff(back30Days, 'seconds'));
    
    
    
     //variables holding days, hours , minutes and seconds
    
    
    
      var Days, Minutes, Hours, Seconds;
       // Set Interval function for performing all calculations and decrementing the countDownSeconds 
    
       setInterval(function () {
    
       // Updating Days 
       Days = pad(Math.floor(countDownSeconds / 86400), 2);
       // Updating Hours 
       Hours = pad(Math.floor((countDownSeconds - (Days * 86400)) / 3600), 2);
       // Updating Minutes
       Minutes = pad(Math.floor((countDownSeconds - (Days * 86400) - (Hours * 3600)) / 60), 2);
       // Updating Seconds
       Seconds = pad(Math.floor((countDownSeconds - (Days * 86400) - (Hours * 3600) - (Minutes * 60))), 2);
    
       // Updation our HTML view
       document.getElementById("days").innerHTML = Days + ' Days';
       document.getElementById("hours").innerHTML = Hours + ' Hours';
       document.getElementById("minutes").innerHTML = Minutes + ' Minutes';
       document.getElementById("seconds").innerHTML = Seconds + ' Seconds';
    
       // Decrement the countDownSeconds
       countDownSeconds--;
    
       // If we reach zero , our chrono should reset to 30 days back again, as you told
       if (countDownSeconds === 0) {
           countDownSeconds = Math.floor(moment().diff(back30Days, 'seconds'));
       }
    
       }, 1000);
      
    
     // Function for padding the seconds i.e limit it only to 2 digits
    
       function pad(num, size) {
           var s = num + "";
           while (s.length < size) s = "0" + s;
           return s;
       }
    

    Here is a jsfiddle