Question

我发现这款香草JS倒数计时器非常适合我的需求。 http://jsfiddle.net/wr1ua0db/17/

`<body>
<div>Registration closes in <span id="time">05:00</span> minutes!</div>

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 * 5,
    display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};

我正在寻找一个可以分配给按钮或事件的重置功能。我的意思是一个不会停止计时器的功能......只需将它重置回5:00 ......所以它会自动转到4:59 ... 4:58 ......等等

Answer 1

尝试这个。它会在加载时启动计时器，并让您能够重置为初始状态。

<style>
#reset:hover {
    cursor: pointer;
}
</style>

<div>Time left = <span id="timer">05:00</span><span id="reset" title="Reset Timer"> &#8634;</span></div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">

    var upgradeTime = 300; // seconds
    var seconds = upgradeTime;

    function timer() {
        var days = Math.floor(seconds / 24 / 60 / 60);
        var hoursLeft = Math.floor((seconds) - (days * 86400));
        var hours = Math.floor(hoursLeft / 3600);
        var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
        var minutes = Math.floor(minutesLeft / 60);
        var remainingSeconds = seconds % 60;

        function pad(n) {
            return (n < 10 ? "0" + n : n);
        }
        document.getElementById('timer').innerHTML = pad(minutes) + ":" + pad(remainingSeconds);
        if (seconds == 0) {
            clearInterval(countdownTimer);
            document.getElementById('timer').innerHTML = "Completed";
            document.getElementById('reset').style.visibility = 'hidden';

        } else {
            seconds--;
        }
    }
    var countdownTimer = setInterval('timer()', 1000);

    // function resetTimer() {
    //     seconds = upgradeTime;
    // }
    $("#reset").click(function() {
        seconds = upgradeTime;
    });

</script>

Answer 2

如果您将计时器设为全局变量，则您可以从其他功能访问它。然后，您可以在名为resetTimer的函数中重置它。见下文：

var timer;
function startTimer(duration, display) {
    timer = duration;
    var 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);
}

function resetTimer() {
  timer = 60 * 5;
}

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

Here is a fiddle

Answer 3

使用addEventListener之类的东西并调用命名函数。

＆＃13;

(function() {
  'use strict';
   let reset = document.getElementById('reset');
  
   reset.addEventListener('click', function() {
      alert('reset');
   //add here the function name to call them. 
   })
})();

＆＃13;

<button id="reset">Reset</buton>

＆＃13;

如何重置Javascript分钟倒数计时器

3 个答案: