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

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>