Question

我正在建立一个表单，我需要一个简单的10分钟javascript倒数计时器来显示。我发现并在使用此页面顶部的代码：The simplest possible JavaScript countdown timer? ..它的作用完全相同我需要它，但是我需要定时器在到达00:00时不重置。我是Java的新手，因此可以提供任何帮助。

我浏览了The simplest possible JavaScript countdown timer?上的帖子。.但看不到有人专门谈论在计时器结束时停止重置计时器。

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分钟保存一次草稿。

Answer 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);

Answer 2

感谢所有帮助。我找到了另一段对我有用的代码。我将在下面分享给其他人使用。

  //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;
  }
}

完成时如何停止JavaScript计时器重置

2 个答案: