1

我正在构建一个表单，我需要一个简单的 10 分钟 javascript 倒数计时器来显示。我在这里找到并使用页面顶部的代码：最简单的 JavaScript 倒数计时器？ .. 它完全符合我的需要，但我需要计时器在到达 00:00 时不要重置。我是 Javascript 的新手，所以任何帮助将不胜感激。

我浏览了最简单的 JavaScript 倒数计时器上的帖子？..但看不到任何人专门谈论停止计时器在结束时重置。

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 10,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

计时器按我的需要工作，但每次达到 0 时都会重置。我只需要它在页面加载时开始并在 10 分钟时停止。我只是提醒我的表单用户每 10 分钟保存一次草稿。

4

2 回答 2

1

尝试这个：

var myInterval = setInterval(function () {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
        clearInterval(myInterval);
    }
}, 1000);
于 2019-05-08T14:14:14.557 回答
0

感谢所有的帮助。我找到了另一段为我完成这项工作的代码。我将在下面分享给其他人使用。

  //Countdown Timer

  var startTime = 10; //set countdown in Minutes  
  var doneClass = "done";
  var blinkerClass = "blink";
  function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var intervalLoop = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        for(var i=0;i<display.length;i++){
          display[i].textContent = minutes + ":" + seconds;
        }
        if (--timer < 0) {
          for(var i=0;i<display.length;i++){
            display[i].classList.add(doneClass);
            display[i].classList.add(blinkerClass);
            display[i].textContent = "Save Now";
          }
          clearInterval(intervalLoop);
        }
        }, 1000);
    }
window.onload = function () {
    var setMinutes = 60 * startTime,
    display = $('#timer');
    startTimer(setMinutes, display);
};

  //End Countdown timer

这是上面代码中引用的 CSS


.done {color: tomato !important; font-weight: bold;}
.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
于 2019-05-08T20:55:14.860 回答