如何为事件系列创建倒计时计时器

Question

希望有人能帮我做这个。在此之前：我确实查看了谷歌、其他问题和许多其他地方，但仍然找不到适合我的解决方案——全面编码noob。

这就是我正在努力解决的问题我有一个活动系列，有几个日期。现在我想为第一次约会显示一个倒计时计时器。在这个倒计时达到0之后，我希望它能开始下一个日期的下一个倒计时。

当然，未来也会有约会，所以我希望有可能单独扩大。

我希望这不会是一个痛苦的。。。但不幸的是，我已经花了5个多小时寻找和搜索一个已经完成的解决方案，我可以复制并使用。但没有找到任何对我有用或我能理解和使用的东西。

因此，我真的希望在这里得到帮助，请记住——我是一个彻头彻尾的傻瓜，对编码有0.0001%的了解。

那么你知道解决方案吗？你能给我指一下吗？你能告诉我怎么做吗？

提前感谢！

Answer 1

设置一个日期数组，并在数组上循环检查日期是否在未来，然后更新倒计时计时器并中断循环。示例

<!-- HTML element where to show countdown timer -->
<p id="demo"></p>
<script>
// Target dates
let countdown_dates = [
'Jan 5, 2021 15:00:00',
'Apr 1, 2021 15:00:00',
'Jan 5, 2022 15:00:00',
]
// Currency number of milliseconds - Unix
var now = new Date().getTime();
// Loop dates
for (i = 0; i < countdown_dates.length; i++) {      

// Target date in Unix
var countDownDate = new Date( countdown_dates[i] ).getTime();
// Check is in the future
if ( countDownDate > now ){
// Update the count down every 1 second
var x = setInterval(function() {
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and secondsa
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
}, 1000);
// Exit loop as we only want to target next date.
break;
}
};  
</script>