页面加载后如何激活倒计时？

Posted 2023-05-08

【中文标题】页面加载后如何激活倒计时？

【英文标题】：How to activate the countdown after the page loads up?

【发布时间】：2021-10-18 11:09:33

【问题描述】：

模板中有一些里程表项目我想用于我的网站（我的编程语言是：Asp.net Core）：

倒计时效果在用户可见时发生（例如当页面滚动到该位置时）

我的问题是：此部分位于网站的主横幅中（标题下方），并且倒计时效果在页面加载之前结束。 因为页面在加载前处于倒计时所需位置

而且页面加载时，只显示倒计时的最终结果！ （没有效果的简单文字）：

这是我的代码：

    <div class="funfacts-area">
    <div class="row">
        @foreach (var item in LandingItems)
        
        <div class="col-lg-3 col-md-3 col-6 col-sm-3">
            <div class="funfact">
                <h3><span class="odometer" data-count="@item.count" dir="ltr">00</span>+</h3>
                <p>@item.name</p>
            </div>
        </div>
        
    </div>
</div>

此代码仅在以下情况下有效：在页面中间使用 Ctrl + F5（清除缓存）并滚动到顶部横幅：然后激活倒计时效果并开始计数...

我尝试在完全加载后将此代码作为 PartialViewResult 发送到 View jquery: windows.onload () 。但不幸的是，countdown 无法检测到用户位置 用于倒计时激活并且值为 00

有什么办法可以解决这个问题？请帮助我...

【参考方案1】：

您可以尝试使用 EventListener。 在 DOM 加载后执行（在 img 和 css 之前）：

document.addEventListener("DOMContentLoaded", function()
    //....
);

或者

在所有内容加载和解析后执行：

window.addEventListener("load", function()
    // ....
)

【讨论】：

我应该使用它来加载 PartialViewResult 吗？ （不幸的是没有工作！）：

您应该使用它来将 与孩子一起注入另一个 div。 EventListener 的内部应该是这样的： document.getElementById("id").innerhtml = ... 很遗憾没用！ 但是我用你可以看到的新答案解决了这个问题。

【参考方案2】：

重估 Html 内容以重新激活里程计倒计时：

        $(window).on('load', function () 
        $('.odometer').each(function () 
            $(this).html("-");
            $(this).html($(this).data("count"));
        );