让JS倒计时再次开始

时间:2017-10-17 09:34:46

标签: javascript countdown countdowntimer

我有一些倒计时的代码,但是想在0(显示文字)时暂停几个小时,然后再开始14天。

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

总结一下: 1.倒计时达到0 2.它会阻塞4个小时并显示文字(“我们正在播放”) 它再次开始大约14天。

我正在考虑这样的事情再次开始倒计时: var dateX = var date2 +(14天左右的时间长度)

我是对的吗? 我只能使用Javascript吗?

1 个答案:

答案 0 :(得分:0)

我把它分成了很多功能,所以你可以推理它。如果你想测试它,你可以将sec变量中的初始秒设置为小的,比如10,然后你也可以将setTimeout中的第二个参数设置为小的,比如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>