如何为事件系列创建倒数计时器？答案

【问题标题】：How can I create a countdown timer for an event series?如何为事件系列创建倒数计时器？
【发布时间】：2021-03-22 07:46:05
【问题描述】：

希望有人能帮我解决这个问题。在此之前：我确实检查了 Google、其他问题和很多其他地方，但仍然找不到适合我的解决方案 - 完全编码新手。

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

当然也会有未来的日期，所以我希望有可能单独扩展它。

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

所以真的希望在这里得到帮助，请记住 - 我是一个完全的菜鸟，并且对编码有大约 0.0001% 的知识。

那么您知道解决方案吗？你能指点我吗？你能告诉我怎么做吗？

提前致谢！

【问题讨论】：

能否请您添加一些您已经尝试过的代码示例？
我尝试了很多代码，但没有一个有效，所以我没有具体的代码可以在这里分享以进行优化...

标签： javascript html wordpress

【解决方案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>

【讨论】：