Question

我一直在尝试使这段代码成功运行而没有任何运气。我正在尝试创建一个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。预先感谢！

Answer 1

也许是这样的：

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在同一页面中创建多个倒数计时器？

1 个答案: