Javascript Countdown Timer Repeat and Count total that repea

我有一个从25->0开始的javascript倒计时计时器。

var count=25;
var counter=setInterval(timer, 1000); //1000 will  run it every 1 second
function timer()
{
  count=count-1;
  if (count <= 0)
  {
    clearInterval(counter);
    return;
   }
 document.getElementById("timer").innerHTML=count; // watch for spelling
 }

div HTML

<span id="timer">25</span>

现在我希望在等待5秒后自动重复倒计时，然后从25开始重新开始->0。我想数一下倒计时重复了多少次。有可能吗？

请帮忙。

您可以尝试将整个代码包装成一个函数（下面示例中的countTimers()），该函数每30秒运行一次（每个定时器后5秒）。然后，设置一个计数器（在下面的示例中为timersCount）来计算将运行的次数。

参见以下示例：

var timersCount = 0, stopped = false, count, counter; // make count, counter global variables so buttons can access them
var timerCounter = setInterval(countTimers, 30000);
countTimers(); // run countTimers once to start
function timer() {
  count = count-1;
  document.getElementById("timer").innerHTML=count;
  if(count <= 0) {
    clearInterval(counter);
    return;
  }
}
function countTimers() {
  timersCount++;
  // as per request in the comments, you can set a timer counter as well:
  document.getElementById("totalcounter").innerHTML = timersCount;
  count = 25;
  counter = setInterval(timer, 1000);
}
// button code:
document.getElementById("reset").addEventListener("click", function() {
  clearInterval(timerCounter);
  clearInterval(counter);
  count = 25;
  document.getElementById("timer").innerHTML=count;
  timersCount = 0;
  document.getElementById("totalcounter").innerHTML = timersCount;
  stopped = true;
});
document.getElementById("stop").addEventListener("click", function() {
  if(stopped)
    return;
  clearInterval(counter);
  stopped = true;
});
document.getElementById("start").addEventListener("click", function() {
  if(!stopped)
    return;
  stopped = false;
  counter = setInterval(timer, 1000);
  setTimeout(function() {
    clearInterval(counter);
    timerCounter = setInterval(countTimers, 30000);
    countTimers();
  }, count*1000);
});

Timer: <span id="timer">25</span><br>
Number of times run: <span id="totalcounter">1</span>
<br><br>
<button id="reset">Reset</button>
<button id="stop">Stop</button>
<button id="start">Start (if stopped)</button>

var count=25;
var counter = null;
// reset count and timer
function reset_timer()
{
    count = 25;
    counter=setInterval(timer, 1000); //1000 will  run it every 1 second
}
// init timer for first time
reset_timer();
function timer()
{
  count--;
  if (count <= 0)
  {
    clearInterval(counter);
    setTimeout(reset_timer, 5000);
    return;
   }
 document.getElementById("timer").innerHTML=count; // watch for spelling
 }

setTimeout是一个运行一次并停止的计时器。

这种方法使用CCD_ 3进行倒计时工作并生成无限循环，如果出于某种原因，你需要stop/resume你的计数器，你可以拒绝Promise链，并用boolean来控制状态：

let secondsCounter = 
    document.querySelector('#secondsCounter'),
    totalCount =
    document.querySelector('#totalCount'),
    ttc = 1,
    actualSecond = 25,
    isPaused = false,
    interval;
let countDown = time => new Promise( (rs, rj) =>   interval = setInterval( ()=>{
    if (isPaused) {
      return rj('Paused');
    }
    secondsCounter.textContent = --actualSecond;
    if (actualSecond == 0){
      actualSecond = time + 1;
      clearInterval(interval);
      rs();
    }
  }, 1000));
let loop = time => countDown(time).then( ()=>{
  totalCount.textContent = ++ttc;
  return Promise.resolve(null);
});
let infinite = () => loop(25)
  .then(infinite)
  .catch(console.log.bind(console));
let stop = () => {
  clearInterval(interval);
  isPaused = true;
}
let resume = () => {
  console.log('Resumed');
  isPaused = false;
  loop(actualSecond).then(infinite);
}
let start_stop = () => isPaused ? 
  resume() : stop();
infinite();

Seconds : <div id="secondsCounter">25</div>
Times   : <div id="totalCount">1</div>
<button onclick="start_stop()">Start/Stop</button>

相关内容

最新更新

热门标签：