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

【问题标题】：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

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

【问题讨论】：

标签： javascript jquery asp.net asp.net-core asp.net-core-mvc

【解决方案1】：

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

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

或者

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

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

【讨论】：

我应该使用它来加载 PartialViewResult 吗？（不幸的是没有工作！）：
您应该使用它来将
与孩子一起注入另一个 div。 EventListener 的内部应该是这样的： document.getElementById("id").innerHTML =
...
很遗憾没用！ 但是我用你可以看到的新答案解决了这个问题。