时间戳

首页 > 解决方案 > 加载后 JavaScript 和内容更改 - 从日期开始的倒数计时器

javascript - 加载后 JavaScript 和内容更改 - 从日期开始的倒数计时器

问题描述

我正在尝试使用一个简单的倒计时计时器，将页面上的时间转换为倒计时。

它可以工作，但我当前的问题是如何显示正常日期，然后再由JavaScript 解析。我希望它立即由 JS 解析，这样用户就不会看到它在日期和倒数计时器之间闪烁。

它将其转换为倒计时：

<span class="countdown">12/10/20 13:10:00</span>

这是代码：

if ($('.countdown').length)
{
    $.each( $('.countdown'), function( key, value ) 
    {
        var time_listed = $(value).text();
        var countdown_object = $(value);
                    
        // Set the date we're counting down to
        var countDownDate = new Date(time_listed).getTime();

        // Update the count down every 1 second
        var x = setInterval(function() 
        {
            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            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"
            countdown_object.text (days + " days " + hours + "h "
            + minutes + "m " + seconds + "s ");

            // If the count down is finished, write some text
            if (distance < 0) 
            {
                clearInterval(x);
                countdown_object.text("EXPIRED");
            }
        }, 1000);
    });
}

我要的是关于如何解决这个问题的建议。是在 HTML 之前加载它的唯一方法还是什么？我对此的最佳实践感到困惑。到处都在告诉我推迟 JavaScript 加载……但是像这样改变内容的东西呢？

在这种情况下，是否有一个“核心”文件用于立即加载内容更改的内容，然后在内容之后加载其余内容或什么？

标签： javascriptjquery

解决方案

问题来自 setInterval 没有自动执行，这是正常的。这是一个解决方法：

if ($('.countdown').length)
{
    $.each( $('.countdown'), function( key, value ) 
    {
        var time_listed = $(value).text();
        var countdown_object = $(value);
                    
        // Set the date we're counting down to
        var countDownDate = new Date(time_listed).getTime();
var counterFunction = function() 
        {
            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            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"
            countdown_object.text (days + " days " + hours + "h "
            + minutes + "m " + seconds + "s ");

            // If the count down is finished, write some text
            if (distance < 0) 
            {
                clearInterval(x);
                countdown_object.text("EXPIRED");
            }
            return counterFunction;
        }
        // Update the count down every 1 second
        var x = setInterval(counterFunction(), 1000);
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="countdown">12/10/20 13:10:00</span>

推荐阅读