Make a JS countdown starts again

Question

I alreay have some code for a countdown, but would like to make it pause for some hours when at 0 (with a text displayed), and then starts again for 14 days.

 <script type="text/JavaScript">
var Display=document.getElementById("Counter");
function Countdown() {
var date1 = new Date();
var date2 = new Date ("Oct 20 20:00:00 2017");
var sec = (date2 - date1) / 1000;
var n = 24 * 3600;
if (sec > 0) {
j = Math.floor (sec / n);
h = Math.floor ((sec - (d * n)) / 3600);
mn = Math.floor ((sec - ((d * n + h * 3600))) / 60);
sec = Math.floor (sec - ((d * n + h * 3600 + mn * 60)));
Affiche.innerHTML = "Next game in : " + d +" d "+ h +" h "+ mn +" min "+ sec + " s ";
window.status = "Remaining time : " + d +" d "+ h +" h "+ mn +" min "+ sec + " s ";
}
tCountdown=setTimeout ("Countdown();", 1000);
}
Countdown();
</script>

So to sum up: 1. The countdown reach 0 2. It blocks for 4 hours and display a text ("We are currently playing") 3. It starts again for around 14 days.

I am thinking of something like this to start again the countdown: var dateX = var date2 + (a length of time around 14 days)

Am I right? Can I do this only with Javascript?

Answer 1

I broke it up into a bunch of functions so you can reason about it. If you want to test it, you can set the initial seconds in the sec variable to something small, like 10, and then you can also set the second argument in setTimeout to something small, like 10.

<div id="counter"></div>
<script>
// initialize
var first_target_date = new Date ("Oct 20 20:00:00 2017");
var sec = calcSecDiff(new Date(), first_target_date);
var counter = document.getElementById("counter");
var timeout; // we will update this global variable when we want to stop the whole thing

// start the countdown
countdown();

// do it again every second
var interval = setInterval(function(){
    countdown();
}, 1000);


function countdown() {
    counter.innerHTML = parseTime(sec);
    // decrement the second
    sec--;

    // if we get to 0
    if (sec < 0) {

        clearInterval(interval);

        counter.innerHTML = "We are currently playing";

        if (timeout) return; // it's over

        var timeout = setTimeout(function(){

            sec = daysToSec(14); // reset the seconds to 14 days away
            var interval = setInterval(function(){
                countdown();
            }, 1000);

        }, hrsToMs(4)); // wait four hours before counting down again
    };
}

// returns days, hours, minutes, and seconds from seconds
// see https://stackoverflow.com/questions/13903897/javascript-return-number-of-days-hours-minutes-seconds-between-two-dates
function parseTime(sec){

    // calculate (and subtract) whole days
    var days = Math.floor(sec / 86400);
    sec -= days * 86400;

    // calculate (and subtract) whole hours
    var hours = Math.floor(sec / 3600) % 24;
    sec -= hours * 3600;

    // calculate (and subtract) whole minutes
    var minutes = Math.floor(sec / 60) % 60;
    sec -= minutes * 60;

    // what's left is seconds
    var seconds = sec % 60;

    return days + " days, " + hours + " hours, " + minutes + " minutes, " + seconds + " seconds";
}

// calculates the difference between two dates in seconds
function calcSecDiff(date1, date2){
    return Math.round((date2 - date1) / 1000);
}

// converts hours to milliseconds
function hrsToMs(hrs){
    return hrs * 60 * 60 * 1000;
}

// converts days to seconds
function daysToSec(days){
    return days * 24 * 60 * 60;
}
</script>