递归倒数计时器

Question

我正在尝试创建一个从 25 分钟开始到 0 结束的 javascript 计数器。我的想法是在页面上将 minutes/seconds 显示为倒计时时钟（我的目标 div 称为 'txt')。但是我没有得到我想要的结果——定时器不会在每次函数为运行（每毫秒）时减去。关于我哪里出错的任何想法？代码如下：

function countdown() {

    var target = 1500000; // 25 mins
    var current = 1000; // 0 secs

    for (var i=0; i<5; i++) {
        var diff = target-current;           // calculates the 25 minutes
        var min = Math.floor(diff/1000/60);  //gets mins
        var sec = (diff/1000) % 60;          // gets secs
        current = current+1000;

        document.getElementById("txt").innerHTML = min + ":" + sec;
        var t = setTimeout(countdown, 2500);}
    }

}

Answer 1

您需要在函数之外定义电流。当前，每次函数运行.

时，您都将其重置为 1000

Answer 2

给你：

var target = 1500000; // 25 mins
var current = 0; // 0 secs
function countdown() {
    current += 1000;
    var diff = target-current;           // calculates the 25 minutes
    var min = Math.floor(diff/1000/60);  //gets mins
    var sec = (diff/1000) % 60;          // gets secs

    document.getElementById("txt").innerHTML = min + ":" + sec;
    if (diff > 0)
        setTimeout(countdown, 1000);

}

countdown();

JSFiddle 与运行示例：https://jsfiddle.net/epcmw0uc/5/

递归倒数计时器

Recursive countdown timer

javascript

recursion

timer

countdown