基本的Javascript倒计时

Basic Javascript Countdown

本文关键字：倒计时 Javascript      更新时间：2023-09-26

各位开发人员，您好。请考虑一个看起来很简单的问题：我有一个基本的倒计时，目的是倒计时到5，并不断循环。

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
function intervalCountDown() {
  var counter = 5;
  countDownDiv.innerHTML = counter--;
}

问题是它没有倒计时，我不知道是什么原因。如果有帮助的话，这是我创建的小提琴。

每次调用countDown时都会重新定义计数器
为了防止这种情况，您应该在外部范围中定义变量。

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}
<span id="countDown"></span>

您还可以创建更可重复使用的东西：

    function countDown(from, time, el) {
      el.innerHTML = from;
      var i = setInterval(tick, time);
      function tick() {
        el.innerHTML = --from;
        if (from <= 0) clearInterval(i);
      }
    }
countDown(100, 1000, document.getElementById('c1'));
countDown(10, 5000, document.getElementById('c2'));
<span id="c1"></span><hr/>
<span id="c2"></span>

只需将var计数器放在函数intervalCountDown（）之外

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
  var counter = 5;
function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}

在函数外初始化计数器。

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}

每个刻度都创建一个新的counter变量。将counter移出刻度功能：

var countDownDiv = document.getElementById('countDown');
var counter = 5;
window.setInterval(intervalCountDown, 1000);
function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}
<div id="countDown"></div>

您每一次都在重新定义计数器变量。修复：http://jsfiddle.net/4tpcdtdj/1/

var countDownDiv = document.getElementById('countDown');
var counter = 5;
var countInterval = setInterval(intervalCountDown, 1000);
function intervalCountDown() {
  if (counter <= -1) {
    clearInterval(countInterval);
    return;
  }
  countDownDiv.textContent = counter--;
}

您用值5重新定义计数器变量。您可以使用下面的闭包

var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown(), 1000);
function intervalCountDown() {
  var counter = 5;
  return function(){
    countDownDiv.innerHTML = counter--;
    if(counter==0) // Re-initiate counter
      counter = 5;
  }
}

您的变量counter在Locally中声明，因此一次又一次地分配相同的值counter=5。这就是下面的问题显示我的修正

var bingoDiv = document.getElementById('bingo');
window.setInterval(intervalBingo, 5000);
function intervalBingo() {
  var newNum = Math.floor(Math.random() * 75) + 1;
  bingoDiv.innerHTML = newNum;
}
// basic countdown
var countDownDiv = document.getElementById('countDown');
window.setInterval(intervalCountDown, 1000);
var counter = 5;
function intervalCountDown() {
    if (counter == 0) {
     counter =5;
   }
  countDownDiv.innerHTML = counter--;
}


// number randomizer
var bingoDiv = document.getElementById('bingo');
var counter = 5;
var counter_interval = false;
window.setInterval(intervalBingo, 5000);
function intervalBingo() {
  var newNum = Math.floor(Math.random() * 75) + 1;
  counter = 5;
  bingoDiv.innerHTML = newNum;
  clearInterval(counter_interval);
  countDownDiv.innerHTML = counter--;
  counter_interval = window.setInterval(intervalCountDown, 1000);
}
// basic countdown
var countDownDiv = document.getElementById('countDown');
function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}
<div id="bingo"></div>
<hr>
<div id="countDown"></div>

我喜欢这个，你可以试试这个。

试试这个，

var num = document.getElementById("countDown");//Get value from div.
var counter = 5; //Declaring counter value.
num.innerHTML = counter;//assigning counter value to num variable
function deg(){
counter--;//decrementing counter value.
num.innerHTML = counter;//getting output in div using innerHTML
if(counter <= 0){ //if couter value reaches or goes below 0 then stop     
// decrementing of counter value. 
window.clearInterval(st);
}
}
var st = window.setInterval(deg,1000);
相关文章：