基本 Javascript 倒计时

Question

开发者大家好！请回答一个看起来非常简单的问题：我有一个基本的倒计时，目的是倒数到 5 并不断循环。

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

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

Answer 1

每次调用 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>

Answer 2

只需将您的 var counter 放在 function intervalCountDown()

之外

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

Answer 3

在函数外初始化你的计数器。

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

  countDownDiv.innerHTML = counter--;
}

Answer 4

您在每次报价时创建一个新的 counter 变量。将counter移出tick函数：

var countDownDiv = document.getElementById('countDown');
var counter = 5;
window.setInterval(intervalCountDown, 1000);

function intervalCountDown() {
  countDownDiv.innerHTML = counter--;
}

<div id="countDown"></div>

Answer 5

你每次都在重新声明计数器变量。修复：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--;
}

Answer 6

您重新定义了值为 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;
  }
}

Answer 7

你在Locally声明的变量counter所以一次又一次赋值相同的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--;
}

Answer 8

// 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>

我是这样的，你可以试试这个。

Answer 9

试试这个，

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);

基本 Javascript 倒计时

Basic Javascript Countdown

javascript

intervals

countdown