到达 HTML 文件中的某个点时为数字和文本设置动画

Posted 2023-03-11

【中文标题】到达 HTML 文件中的某个点时为数字和文本设置动画

【英文标题】：Animate Number and Text when reach a certain point in the HTML file

【发布时间】：2016-07-25 02:34:54

【问题描述】：

当我向下滚动 html 文件并到达某个部分时，我想用文本计算数字。代码如下所示：

<h3 class="count">25 Years</h3>
<p>On the Road...</p>

<h3 class="count">143 Million</h3>
<p>Transactions worldwide 2015</p>

$('.count').each(function() 
    $(this).prop('Counter', 0).animate(
        Counter: $(this).text()
    , 
        duration: 4000,
        easing: 'swing',
        step: function (now) 
            $(this).text(Math.ceil(now));
        
    );
);

问题是我只输入一个数字才能得到正确的结果。如果我输入像25 Years 这样的字符串，它会输出NaN。

对我的代码有什么建议吗？

var targetOffset = $(".company-numbers").offset().top;

        var $w = $(window).scroll(function()
            if ( $w.scrollTop() > targetOffset ) 
                (function () 
                    $('.count').each(function () 
                        $(this).prop('Counter',0).animate(
                            Counter: $(this).text()
                        , 
                            duration: 4000,
                            easing: 'swing',
                            step: function (now) 
                                $(this).text(Math.ceil(now));
                                return false;
                            
                        );
                    );
                )();
             else 
                return false;
            
        )

【参考方案1】：

如果您想像在函数或 JSON 中创建具有键值的数组一样操作，则必须为元素分配数值。

【讨论】：

欢迎来到 SO 但请提供您的答案并提供示例或提供参考链接以便更好地理解

【参考方案2】：

请检查这段代码，你真的想要这样吗？ 告诉我！！！

<h3 class="count">25 Years</h3>
<p>On the Road...</p>

<h3 class="count">143 Million</h3>
<p>Transactions worldwide 2015</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
   $('.count').each(function () 
                $(this).prop('Counter',0).animate(
                    Counter: $(this).text().match(/\d/g).length
                , 
                    duration: 4000,
                    easing: 'swing',
                    step: function (now) 
                        $(this).text(Math.ceil(now));
                    
                );
            );
            </script>

或者如果您想计算总字符数，请更改“计数器”属性。

Counter: $(this).html().length

【讨论】：

嗨 Gaurav，谢谢你的建议。不幸的是 .match(/\d/g).length 和 .html().length 没有输出正确的数字/字符串。

嗨@151RUM 你真的想从“count”类的字符串中计算字符数吗？

不，我想为计数类的内容设置动画，例如 40.000 个单位，然后当到达 HTML 文件中的内容时，它应该在 4 秒内从零计数到 40000...你得到它伴侣？ :)

【参考方案3】：

问题是因为您的 jQuery 代码期望该值能够被解析为整数。尝试将要计数的值放在它们自己的元素中，例如<span>，然后对这些值调用 jQuery 逻辑。

<h3><span class="count">25</span> Years</h3>
<p>On the Road...</p>

<h3><span class="count">143</span> Million</h3>
<p>Transactions worldwide 2015</p>

【讨论】：

这行得通，但如果我把它放在条件语句中，代码会向上计数，但之后开始倒计时......我尝试返回 false，但它没有成功......请检查我的代码的第一篇文章...