Javascript jQuery动画数字计数器从零到值

我已经创建了一个脚本来设置一个从零到其值的数字的动画

工作 jQuery

$（{Counter:0}）。设置动画({
计数器：$（'.Single'）.text（）
}, {
持续时间：1000，
放松:"摇摆",，
步骤：函数（）{
$（'.Single'）.text（Math.ceil（this.Counter））；
}
});

150
步骤回调中的此
不是元素，而是传递给animate（）的对象

另一种方法是保持对
this
的引用

$('.Count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

您可以在
中获取元素本身。each（）
，请尝试此操作，而不是使用
此

$('.Count').each(function (index, value) {
    jQuery({ Counter: 0 }).animate({ Counter: value.text() }, {
        duration: 1000,
        easing: 'swing',
        step: function () {
            value.text(Math.ceil(this.Counter));
        }
    });
});

您的
this
没有引用步骤回调中的元素，而是希望在函数的开头保留对它的引用（在我的示例中用
$this
包装）：

更新：如果要显示十进制数，则可以使用
value.toFixed（2）
，而不是使用
Math.ceil
将值舍入为两位小数：

这是我的工作

<script type="text/javascript">
$(document).ready(function(){
        countnumber(0,40,"stat1",50);
        function countnumber(start,end,idtarget,duration){
            cc=setInterval(function(){
                if(start==end)
                {
                    $("#"+idtarget).html(start);
                    clearInterval(cc);
                }
                else
                {
                   $("#"+idtarget).html(start);
                   start++;
                }
            },duration);
        }
    });
</script>
<span id="span1"></span>


$（文档）.ready（函数（）{
计数编号（0,40，“stat1”，50）；
函数计数编号（开始、结束、idtarget、持续时间）{
cc=setInterval（函数（）{
如果（开始==结束）
{
$（“#”+idtarget）.html（开始）；
净间隔（cc）；
}
其他的
{
$（“#”+idtarget）.html（开始）；
启动++；
}
}，持续时间）；
}
});
这对我有用

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

这对我有用

HTML代码

<span class="number-count">841</span>

重要信息：看起来差别不大，但实际上应该使用数据属性来保存要计数的原始数字。改变原始数字可能会产生意想不到的后果。例如，每次元素进入屏幕时，我都会运行这个动画。但是，如果元素进入、退出，然后在第一个动画结束前第二次进入屏幕，它将计数到错误的数字

HTML:

代码的作用是，数字8000从0到8000递增。问题是，它被放置在相当长的页面中间，一旦用户向下滚动并实际看到数字，动画就已经开始了。一旦计数器出现在视口中，我想触发它

JS:

和HTML：

 <span class="count">8000</span>

8000
您可以使用jQuery中的animate函数来完成

$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
    duration: 8000,
    easing: 'linear',
    step: function () {
        $('.yourelement').html(Math.floor(this.countNum));
    },
    complete: function () {
        $('.code').html(this.countNum);
        //alert('finished');
   }
});

这是我的解决方案
当元素显示到视口中时，它也在工作


您可以通过单击查看正在运行的代码

我无法让它工作，但谢谢你的输入。如果我们有十进制数字呢？@VilasKumkar我知道这是一个旧的线程，但对于未来的谷歌用户来说，下面是我如何调整答案来处理小数，以及前缀和后缀（例如，“1234万美元”（我相信它会更干净）：我还更新了我的答案，用一种方法打印出任何小数位数的数字。感谢好的代码片段@floribon。如果我想在使用相同的代码进行计数后进行倒计时，我能做些什么呢？有什么想法吗？我无法使用@Obsidian发布的小提琴来处理十进制，
100.50
显示作为
101
，尝试使用@ashicus和@floribon代码，但不起作用，有什么想法吗？提前谢谢！非常感谢！这正是我在上面遇到的问题。我喜欢这个答案，因为它里面有完整的方法。当处理大数字时，可以设置最终的数字，以确保它是应该的值。谢谢！
<span class="number-count">841</span>

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

<p class="count" data-value="200" >200</p>
<p class="count" data-value="70" >70</p>
<p class="count" data-value="32" >32</p>

$('.count').each(function () {
    $(this).prop('Counter', 0).animate({
            Counter: $(this).data('value')
        }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {                      
            $(this).text(this.Counter.toFixed(2));
        }
    });
});

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

 <span class="count">8000</span>

$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
    duration: 8000,
    easing: 'linear',
    step: function () {
        $('.yourelement').html(Math.floor(this.countNum));
    },
    complete: function () {
        $('.code').html(this.countNum);
        //alert('finished');
   }
});

var counterTeaserL = $('.go-counterTeaser');
var winHeight = $(window).height();
if (counterTeaserL.length) {
    var firEvent = false,
        objectPosTop = $('.go-counterTeaser').offset().top;

        //when element shows at bottom
        var elementViewInBottom = objectPosTop - winHeight;
    $(window).on('scroll', function() {
        var currentPosition = $(document).scrollTop();
        //when element position starting in viewport
      if (currentPosition > elementViewInBottom && firEvent === false) {
        firEvent = true;
        animationCounter();
      }   
    });
}

//counter function will animate by using external js also add seprator "."
 function animationCounter(){
        $('.numberBlock h2').each(function () {
            var comma_separator_number_step =           $.animateNumber.numberStepFactories.separator('.');
            var counterValv = $(this).text();
            $(this).animateNumber(
                {
                  number: counterValv,
                  numberStep: comma_separator_number_step
                }
            );
        });
    }


https://jsfiddle.net/uosahmed/frLoxm34/9/