div的单独倒计时答案

【问题标题】：separate countdown for divsdiv的单独倒计时
【发布时间】：2016-03-15 04:48:58
【问题描述】：

我想在每个 div 中显示倒计时。现在我从我的数据库中获取秒数并存储在 data-countdown 属性中，然后使用以下 js 代码进行倒计时。只有第一个 div 每秒更改一次值，其他的不会更改。这是小提琴： http://fiddle.jshell.net/j61qs7oc/

//imagine this line of code in every loop of a for loop so $remaining will be different
<div style="font-size: 25px; color:#e3b40b ; font-weight: 600;" data-countdown="'.$remaining.'"><i class="fa fa-spinner fa-pulse"></i></div>

这里是js代码

$('[data-countdown]').each(function() {

finalDate = $(this).data('countdown');
var $this = $(this);
timeout = null;
time = null;
startCountdown($this,finalDate, 1000, end);

function startCountdown(display,timen, pause, callback) {
    time = timen;
    display.html(timen);

    if (timen == 0)
        callback();
    else {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            startCountdown(display,timen - 1, pause, callback)
        }, pause);
    }
}

function end() {
    alert();
}
});

【问题讨论】：

你想做什么？..你能解释一下吗
@SunnyS.M 看看我的小提琴。我希望每个 div 有一个单独的倒计时
嗯，我来晚了..它已经解决了
这里（fiddle.jshell.net/j61qs7oc/2）我更新了代码，但已经被 Brandon Gano 解决了......

标签： javascript jquery html jquery-countdown

【解决方案1】：

当您声明一个变量而不使用 var 关键字时，您正在创建一个全局变量。因此，倒计时的每个实例都会覆盖finalDate、timeout 和time 的先前值。尝试在每一行之前添加var，它应该可以满足您的需求。即：

var finalDate = $(this).data('countdown');
var $this = $(this);
var timeout = null;
var time = null;
startCountdown($this,finalDate, 1000, end);

【讨论】：

非常感谢！解决了问题

【解决方案2】：

你也可以用普通的 Javascript 而不是 jQuery 来做这件事...

var countdownDivs = document.querySelectorAll('div[data-countdown]');

function end() {
    alert();
}
function countdown(display, timen, pause, callback) {
    display.innerHTML = timen;

    if (timen == 0) callback();
    else {
        display.timeout;
        clearTimeout(display.timeout);
        display.timeout = setTimeout(function () {
            countdown(display, timen - 1, pause, callback)
        }, pause);
    }
}

for(var i = countdownDivs.length>>>0; i--;){
    countdown(countdownDivs[i], countdownDivs[i].dataset.countdown, 1000, end);
}

div[data-countdown]{
    font-size:25px;
    color:#e3b40b;
    font-weight:600;
}

<div data-countdown="12312312"></div>

<div data-countdown="555555"></div>

<div data-countdown="95695"></div>

【讨论】：