在数字中插入点

Question

我添加了像7000000这样的动画计数器

我尝试在数字中间自动插入一个点，以获得以下输出:700.00.000

问题是代码并不总是起作用的。有时我必须刷新两次页面才能工作。

<script type="text/javascript">
    jQuery(function($) {
    $('.number').each(function() {
        $(this).prop('Counter', 0).animate({
            Counter: parseFloat($(this).text().replace(/,/g, ''))
        }, {
            duration: 3000,
            easing: 'swing',
            step: function(now) {
                $(this).text(getRupeesFormat(Math.ceil(now)));
            }
        });
    });


    function getRupeesFormat(val) {
        while (/(\d+)(\d{3})/.test(val.toString())) {
            val = val.toString().replace(/(\d+)(\d{3})/, '$1' + '.' + '$2');
        }
        return val;
    }
    });
</script>

通过检查控制台，我没有发现任何相关的错误。

Answer 1

我认为您的问题是代码在内容存在于页面之前被执行。尝试将它们放入就绪函数。参考：https://learn.jquery.com/using-jquery-core/document-ready/

您的代码将变为：

<script type="text/javascript">
    jQuery(document).ready(function($) {

      $('.number').each(function() {
        $(this).prop('Counter', 0).animate({
            Counter: parseFloat($(this).text().replace(/,/g, ''))
        }, {
            duration: 3000,
            easing: 'swing',
            step: function(now) {
                $(this).text(getRupeesFormat(Math.ceil(now)));
            }
        });
      });


      function getRupeesFormat(val) {
        while (/(\d+)(\d{3})/.test(val.toString())) {
            val = val.toString().replace(/(\d+)(\d{3})/, '$1' + '.' + '$2');
        }
        return val;
      }

    });
</script>