JavaScript倒数计时器应在00:00停止

时间:2020-09-26 12:42:05

标签: javascript jquery timer countdown countdowntimer

我正在使用倒数计时器,我发现这段代码几乎是我所需要的,除了我不想在00:00时重新启动计时器。我试图进行更改,但没有成功。

这是JsFiddle代码

<div id="countdown">1:00</div>

var seconds;
var temp;
var GivenTime=document.getElementById('countdown').innerHTML
console.log(GivenTime)

function countdown() {
time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
if (seconds == '') {
temp = document.getElementById('countdown');
temp.innerHTML = GivenTime;
    time = document.getElementById('countdown').innerHTML;
timeArray = time.split(':')
seconds = timeToSeconds(timeArray);
}
seconds--;
    temp = document.getElementById('countdown');
temp.innerHTML= secondsToTime(seconds);
timeoutMyOswego = setTimeout(countdown, 1000);
    

}
function timeToSeconds(timeArray) {  
var minutes = (timeArray[0] * 1);
var seconds = (minutes * 60) + (timeArray[1] * 1);
return seconds;
}

function secondsToTime(secs) {
var hours = Math.floor(secs / (60 * 60));
hours = hours < 10 ? '0' + hours : hours;
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
seconds = seconds < 10 ? '0' + seconds : seconds;
    
  
return  minutes + ':' + seconds;
//hours + ':' + 
    
}
countdown();

2 个答案:

答案 0 :(得分:2)

当倒数达到00:00时,您可以简单地在倒数中使用clearTimeout功能

您只需要在倒数计时中添加此if条件即可。

if (secondsToTime(seconds) == '00:00') {
   clearTimeout(timeoutMyOswego); //stop timer
}

工作演示:

var seconds;
var temp;
var GivenTime = document.getElementById('countdown').innerHTML

function countdown() {
  time = document.getElementById('countdown').innerHTML;
  timeArray = time.split(':')
  seconds = timeToSeconds(timeArray);
  if (seconds == '') {
    temp = document.getElementById('countdown');
    temp.innerHTML = GivenTime;
    time = document.getElementById('countdown').innerHTML;
    timeArray = time.split(':')
    seconds = timeToSeconds(timeArray);
  }
  seconds--;
  temp = document.getElementById('countdown');
  temp.innerHTML = secondsToTime(seconds);
  var timeoutMyOswego = setTimeout(countdown, 1000);
  if (secondsToTime(seconds) == '00:00') {
    clearTimeout(timeoutMyOswego); //stop timer
    console.log('Time"s UP')
  }
}

function timeToSeconds(timeArray) {
  var minutes = (timeArray[0] * 1);
  var seconds = (minutes * 60) + (timeArray[1] * 1);
  return seconds;
}

function secondsToTime(secs) {
  var hours = Math.floor(secs / (60 * 60));
  hours = hours < 10 ? '0' + hours : hours;
  var divisor_for_minutes = secs % (60 * 60);
  var minutes = Math.floor(divisor_for_minutes / 60);
  minutes = minutes < 10 ? '0' + minutes : minutes;
  var divisor_for_seconds = divisor_for_minutes % 60;
  var seconds = Math.ceil(divisor_for_seconds);
  seconds = seconds < 10 ? '0' + seconds : seconds;

  return minutes + ':' + seconds;
  //hours + ':' + 

}
countdown();
<div id="countdown">00:10</div>

答案 1 :(得分:1)

您可以尝试替换负责重新启动计时器的代码。

但是,这样做只会导致计时器变为负值:D

因此,根据@Always Helping的建议,您需要添加代码以停止计时器。

var seconds, temp;
var GivenTime = document.getElementById('countdown').innerHTML;

function countdown() {
  time = document.getElementById('countdown').innerHTML;
  timeArray = time.split(':')
  seconds = timeToSeconds(timeArray);
  console.log(seconds);
  
  // Do something when the timer is out
  if (seconds === 0) {
    clearTimeout(timeoutMyOswego);
    return;
  }
  
  seconds--;
  temp = document.getElementById('countdown');
  temp.innerHTML = secondsToTime(seconds);
  timeoutMyOswego = setTimeout(countdown, 1000);
};
countdown();

function timeToSeconds(timeArray) {
  var minutes = (timeArray[0] * 1);
  var seconds = (minutes * 60) + (timeArray[1] * 1);
  return seconds;
}

function secondsToTime(secs) {
  var hours = Math.floor(secs / (60 * 60));
  hours = hours < 10 ? '0' + hours : hours;
  var divisor_for_minutes = secs % (60 * 60);
  var minutes = Math.floor(divisor_for_minutes / 60);
  minutes = minutes < 10 ? '0' + minutes : minutes;
  var divisor_for_seconds = divisor_for_minutes % 60;
  var seconds = Math.ceil(divisor_for_seconds);
  seconds = seconds < 10 ? '0' + seconds : seconds;

  return minutes + ':' + seconds;
}
<div id="countdown">00:05</div>