Question

我正在尝试使用两个create来分隔计时器。一个计时器会倒计时至某个日期并显示倒计时，而另一个计时器会间隔倒计时并重置（即：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

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

每x分钟/小时重置一次计时器

1 个答案: