javascript - 反复倒计时

Question

我正在尝试用纯 JavaScript 编写一个脚本，它倒计时到两个特定的时间点，一个接一个，每天重复。我不确定如何完成它。

具体来说:我们有 LunchTime，然后我们在第一天有 DinnerTime(两者都是 Date 对象)。每一天，我们都希望(或多或少)有以下行为。

在第一天的午餐时间，“LUNCH TIME”文本为绿色。那天的晚餐时间还有倒计时。一旦到达“DINNER-TIME”，我们就会得到以下信息

这是无限期地每天重复。我不确定如何使用纯 JavaScript 完成这项工作。目前，我有一个方便的 JavaScript 片段:

times = [LunchTime, DinnerTime];
var now = new Date();
var next = times.pop();
var timeRemaining = now - next.getTime();
setTimeout(styleFxn, timeRemaining);

函数 styleFxn 如下:

    function styleFxn(){
             //Change styling on site
}

而且我能够在第一天 将时间从午餐切换到晚餐，但之后就再也不会了。当然，我们不能假设每天的午餐时间和晚餐时间是同一时间，或者它们之间的间隔是相同的!

我想到在循环中使用我的 times 数组。但是，我发现在 while 循环中使用 setTimeout 令人恼火。具体来说:

while((var a = times.pop())!=null){
      var now = new Date();
      var timeRem = now.getTime() - a.getTime();
      setTimeout(function(){
            //Do styling

      }, timeRem);
}

那没用。谁能帮帮我？

Answer 1

队列更适合此任务，因为您需要按照将它们放入数据结构的顺序获取日期对象。

您需要定义一个函数，该函数开始超时并在超时后再次调用自身。如果您使用 while 循环，您将面临浏览器性能下降的问题。

每次从队列中获取日期对象时，都需要将其推回，以便始终有一个日期可以使用。但不要忘记在将日期放回之前将日期增加一天。

以下代码可让您在晚餐和午餐文本之间切换。您可以根据需要更改它以创建倒计时。

希望对你有帮助

// Initialise your date objects
var lunchTime = new Date();
lunchTime.setHours(12, 0, 0, 0);
var dinnerTime = new Date();
dinnerTime.setHours(18, 0, 0, 0);

// Shift the date value by one day if required
var currentTime = new Date();
if (currentTime > dinnerTime) {     // Both Lunch & Dinner time has passed 
    dinnerTime.setDate(dinnerTime.getDate() + 1);
    lunchTime.setDate(lunchTime.getDate() + 1);
} else if (currentTime > lunchTime) {   // Lunch time has passed
    lunchTime.setDate(lunchTime.getDate() + 1);
}

// push those date objects to a queue
var times = [];
times.push(lunchTime);
times.push(dinnerTime);         

function setCountdown(timesArray) {
    var a = timesArray.shift();
    var now = new Date();
    var nextTime = a.getTime();
    var timeRemaining = nextTime - now.getTime();

    setTimeout(function() {
        var hour = a.getHours();
        if (dinnerTime.getHours() == hour) { // DinnerTime
            // CSS to show DinnerTime text
        } else {
            // CSS to show LunchTime text
        } 

        // After time comes push the time back again but increase its day by one
        timesArray.push(new Date(a.setDate(a.getDate() + 1)));

        // Call the same function to initialise a timeout again     
        setCountdown(timesArray);

    }, timeRemaining);
};

setCountdown(times);