gpt4 book ai didi

javascript - 如何使用 Javascript 在同一页面中创建多个倒数计时器?

转载 作者:可可西里 更新时间:2023-11-01 13:41:12 25 4
gpt4 key购买 nike

我一直在尝试让这段代码成功运行,但运气不佳。我正在尝试创建一个 javascript 函数,该函数将在同一页面上倒计时多个日期。我的 JavaScript 函数如下:

 <script>
function getTimeRemaining(endtime){
var deadline = new Date(endtime).getTime();
var x = setInterval(function() {
var now = Math.floor(Date.now() / 1000);
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("trip_" + endtime).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
if (t < 0) {
clearInterval(x);
document.getElementById("trip_" + endtime).innerHTML = "expired";
}
}, 1);
}
</script>

结束时间以 unix 时间戳的形式提供。如果时间已过,它会正确显示。但如果时间剩余,它会显示 0d0h0m0s 而没有任何更新。只是为了好玩,我将 t 变量添加到倒计时的末尾,它会倒计时剩余的秒数,但不会在倒计时本身上显示它。我猜我的天数、小时数、分钟数和秒数变量有问题。我没有使用毫秒,我认为我使用的数学是假设我这样做了。有谁知道我能做些什么来解决我的问题?我不太精通 javascript。提前致谢!

最佳答案

可能是这样的:

function TimeRemaining(){
var els = document.querySelectorAll('[id^="trip_"]');
for (var i=0; i<els.length; i++) {
var el_id = els[i].getAttribute('id');
var end_time = el_id.split('_')[1];
var deadline = new Date(end_time);
var now = new Date();
var t = Math.floor(deadline.getTime() - now.getTime());
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
if (t < 0) {
document.getElementById("trip_" + end_time).innerHTML = 'EXPIRED';
}else{
document.getElementById("trip_" + end_time).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
}
}
}

function StartTimeRemaining(){
TimeRemaining();
setInterval(function(){
TimeRemaining();
}, 1000)
}


StartTimeRemaining();
<div id="trip_2019-12-31"></div>
<div id="trip_2019-11-01 01:02:12"></div>
<div id="trip_2019-01-01"></div>

关于javascript - 如何使用 Javascript 在同一页面中创建多个倒数计时器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57939173/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com