每 x 分钟/小时重置计时器答案

【问题标题】：Reset Timer every x minutes/hour每 x 分钟/小时重置计时器
【发布时间】：2018-07-13 20:18:02
【问题描述】：

我正在尝试两个创建来分隔计时器。一个计时器倒计时到某个日期并显示倒计时，另一个计时器按间隔倒计时并重置（即：5 小时并重置）。

我遇到的问题是第二种选择。我正在尝试创建一个相对于实时的倒计时，然后在达到零时重置。因此，例如将其设置为 2 天 5 小时。一旦完成，时钟将重置为 2 天 5 小时。我无法让时钟在指定时间重置并在没有负数的情况下循环。我尝试了这两种不同的方法，但感觉我的事情过于复杂了。

我使用实时的原因是，如果您在另一个选项卡中打开它，时钟将是相同的。如果我创建一个常规计时器，它将在刷新页面时重置。

codpen

在此示例中，我尝试每 40 秒重置一次计数器，但无法使其正常工作。最终，我希望能够指定日期，即：00:12:00（12 小时倒计时），然后自动重置。我只是不知道如何在不使用负数或冻结它的情况下保持计数。

function timer() {
    var currentTime = new Date()

    var date = currentTime.getDate()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
    var seconds = currentTime.getSeconds()

    var daysLeft = 0;
    var hoursLeft = 24 - hours;
    var minsLeft = 60 - minutes;
    var secsLeft = 60 - seconds;


    // counter freezes at 40 seconds and hangs for 20seconds
    if(secsLeft => 40) {
       secsLeft = 40 - seconds
       if(secsLeft < 0) {
         secsLeft = 40 
       }
    }

document.getElementById('timerUpFront').innerHTML= "<br><br><strong>Duration Countdown with Infinite Reset #2</strong><br>" + daysLeft + " days " + hoursLeft + " hours " + minsLeft + " minutes " + secsLeft + " seconds";
}

var countdownTimer = setInterval('timer()', 1000);

codpen

【问题讨论】：

你有没有试过检查if (daysLeft <= 0 && hoursLeft <= 0 && minsLeft <= 0 && secsLeft <= 0 ) { // reset action }，如果我没有误解那是你需要的（当它是 00:00:00:00 时它会重置）。
正确，我希望它重新开始倒计时。我不清楚如何重置操作。
好的，我会尝试在一个答案中写一个完整的代码并解释一些关于控制定时器的概念。

标签： javascript jquery datetime

【解决方案1】：

您可以将计时器与功能分开以简化它并应用以下逻辑

function startTimer () {
  val targetRemainedSeconds = // calculate the value
  val remainedSeconds = targetRemainedSeconds
  setInterval(timer(), 1000)
}
function timer () {
  remainedSeconds--
  if (remainedSeconds < 0) reaminedSeconds = targetReaminedSeconds // reset the timer 
  timerUpdate()
}
function timerUpdate() {
  // use 'remainedSeconds' to update timer 
}

【讨论】：