我想在我的每个 div 中显示倒计时。现在我从我的数据库中获取秒数并存储在 data-countdown 属性中,然后使用以下 js 代码进行倒计时。只有第一个 div 每秒更改值,其他的不更改。 这是 fiddle : 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();
}
});
最佳答案
当您在不使用 var
关键字的情况下声明一个变量时,您正在创建一个全局变量。因此,倒计时的每个实例都会覆盖 finalDate
、timeout
和 time
的先前值。尝试在每一行之前添加 var
,它应该可以满足您的需要。即:
var finalDate = $(this).data('countdown');
var $this = $(this);
var timeout = null;
var time = null;
startCountdown($this,finalDate, 1000, end);
关于javascript - div的单独倒计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34186849/