我正在尝试使用jQuery创建多个倒计时计时器。问题是这些数字并没有改变。而且，我不确定这是否是最好的方法。任何帮助都是感激的!
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
$(document).ready(function() {
function countDown(id, date) {
var end = new Date(date);
end = (Date.parse(end) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var left = end - now;
var days = Math.floor(left / 86400);
var hours = Math.floor((left - (days * 86400)) / 3600);
var minutes = Math.floor((left - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((left - (days * 86400) - (hours * 3600) - (minutes * 60)));
$("#" + id).html(days + " days, " + hours + " hours, " + minutes + " minutes, " + seconds + " seconds");
}
$(".countdown").each(function() {
var init = setInterval(countDown($(this).attr("id"), $(this).data("date")), 1000);
});
});
</script>
</head>
<body>
<div class="countdown" id="1" data-date="2023-01-06 23:59:59"></div>
<div class="countdown" id="2" data-date="2023-01-07 23:59:59"></div>
<div class="countdown" id="3" data-date="2023-01-08 23:59:59"></div>
</body>
</html>
问题在于你使用setInterval的方式。代码正在执行函数，函数返回的值被设置为interval。
$(".countdown").each(function(elem) {
var init = setInterval(function() {
countDown($(elem).attr("id"), $(this).data("date"));
}, 1000);
});
清理了一些东西的代码:
$(document).ready(function() {
function countDown(elem, date) {
var end = new Date(date);
end = (Date.parse(end) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var left = end - now;
var days = Math.floor(left / 86400);
var hours = Math.floor((left - (days * 86400)) / 3600);
var minutes = Math.floor((left - (days * 86400) - (hours * 3600)) / 60);
var seconds = Math.floor((left - (days * 86400) - (hours * 3600) - (minutes * 60)));
elem.text(days + " days, " + hours + " hours, " + minutes + " minutes, " + seconds + " seconds");
}
$(".countdown").each(function() {
const elem = $(this);
var init = setInterval(function() {
countDown(elem, elem.data("date"));
}, 1000);
});
});<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<div class="countdown" id="1" data-date="2023-01-06 23:59:59"></div>
<div class="countdown" id="2" data-date="2023-01-07 23:59:59"></div>
<div class="countdown" id="3" data-date="2023-01-08 23:59:59"></div>您可以让setInterval只启动一次，并在每个元素上调度您之前选择侦听的事件，这些元素将日期时间包装为倒计时。
在本演示中，在文档就绪的情况下，它为所有.countdown元素上的tick事件添加了一个事件侦听器。事件处理程序将从event.target获取data-date属性值，并将其文本内容替换为getTimeLeft(dategrabbed)返回的字符串。
接下来，它将调用setInterval一次，回调负责将上面定义的事件tick分派给所有感兴趣的元素.countdown，以便它们都将更新它们的内容。
function getTimeLeft(date) {
const now = new Date();
const before = new Date(date);
const left = (now.getTime() - before.getTime()) / 1000;
const days = Math.floor(left / 86400);
const hours = Math.floor((left - (days * 86400)) / 3600);
const minutes = Math.floor((left - (days * 86400) - (hours * 3600)) / 60);
const seconds = Math.floor((left - (days * 86400) - (hours * 3600) - (minutes * 60)));
return `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`;
}
$(document).ready(()=>{
//listens for the tick event on all .countdown elements
$('.countdown').on('tick', (event)=>{
const startingDate = $(event.target).data("date");
const timeLeft = getTimeLeft(startingDate);
$(event.target).text(timeLeft);
})
//triggers the tick event to all the .countdown elements every second
setInterval(()=>{ $('.countdown').trigger('tick'); }, 1000);
});<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<body>
<div class="countdown" id="1" data-date="2023-01-06 23:59:59"></div>
<div class="countdown" id="2" data-date="2023-01-07 23:59:59"></div>
<div class="countdown" id="3" data-date="2023-01-08 23:59:59"></div>
</body>
</html>