Question

我使用以下代码设置倒数计时器，但一旦达到目标时间，它就不会停止倒计时。我很感激任何帮助或指导，一旦目标被击中，我可以做什么来阻止0。

// set the date we're counting down to
var target_date = new Date("Nov 13, 2015 16:51:00").getTime();

// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second



$('#countdown').each(function() {
    setInterval(function () {

        // find the amount of "seconds" between now and target

        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;


        // do some time calculations
        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        // format countdown string + set tag value
        countdown.innerHTML = '<div class="days">' + '<span class="number">' + ((days < 10) ? '0' : '') +  days + '</span>' + '<br /><span class="text">days</span></div>' + '<div class="hours">' + '<span class="number">' + ((hours < 10) ? '0' : '') + hours + '</span>' + '<br /><span class="text">hrs</span></div>' + '<div class="minutes">' + '<span class="number">' + ((minutes < 10) ? '0' : '') + minutes + '</span>' + '<br /><span class="text">min</span></div>' + '<div class="seconds">' + '<span class="number">' + ((seconds < 10) ? '0' : '') + seconds + '</span>' + '<br /><span class="text">sec</span></div>';   
    }, 1000);


});

Answer 1

达到目标后清除间隔。

var iv = setInterval(function () {
  var current_date = new Date().getTime();
  var seconds_left = (target_date - current_date) / 1000;

  if (seconds_left < 0)
  {
    clearInterval(iv);
    return;
  }

  // ...
}, 1000);

＆＃13;

var target_date = new Date((new Date()).getTime() + 6000);

// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second

var iv = setInterval(function() {

  // find the amount of "seconds" between now and target

  var current_date = new Date().getTime();
  var seconds_left = (target_date - current_date) / 1000;

  if (seconds_left < 0) {
    clearInterval(iv);
    return;
  }

  // do some time calculations
  days = parseInt(seconds_left / 86400);
  seconds_left = seconds_left % 86400;

  hours = parseInt(seconds_left / 3600);
  seconds_left = seconds_left % 3600;

  minutes = parseInt(seconds_left / 60);
  seconds = parseInt(seconds_left % 60);

  // format countdown string + set tag value
  countdown.innerHTML = '<div class="days">' + '<span class="number">' + ((days < 10) ? '0' : '') + days + '</span>' + '<br /><span class="text">days</span></div>' + '<div class="hours">' + '<span class="number">' + ((hours < 10) ? '0' : '') + hours + '</span>' + '<br /><span class="text">hrs</span></div>' + '<div class="minutes">' + '<span class="number">' + ((minutes < 10) ? '0' : '') + minutes + '</span>' + '<br /><span class="text">min</span></div>' + '<div class="seconds">' + '<span class="number">' + ((seconds < 10) ? '0' : '') + seconds + '</span>' + '<br /><span class="text">sec</span></div>';
}, 1000);

＆＃13;

<div id="countdown"></div>

＆＃13;

Answer 2

您不需要很多代码来实现目标。例如，你可以摆脱“每个”方法。

要停止计时器，您需要保留一个计时器，并在满足条件时使用“clearInterval”。

var myTimer = setInterval( function() {
    /* all your logic here */
    if (hasReachedZero) {
        clearInterval(myTimer);
    }
}

Answer 3

我的代码中没有看到任何clearInterval方法。

timerfunction = function() {
    //LOGIC
    if (seconds_left < 0) {
        clearInterval(timerId);
    }
}

var timerId = setInterval(timerfunction, 1000);

达到目标时间后，将倒数计时器停在0

3 个答案: