JavaScript实现自动数值增量动画

JS实现自动数值增加动画，渲染如下：

话不多说，直接编码，做更详细的评论。

！doctype HTML HTML Head Metacharset=' UTF-8 ' TITLE Numbers自动增加/TITLE/Head Body H1 ID=' Time ' 0/h1 script//Numbers自动增加到某个值Animation参数(目标元素，用户自定义配置)Function NumAutoPlusanization(目标元素，选项){/*您可以自行修改传入的参数，并根据自己的需要和偏好对函数进行打包*///将其绑定到对应HTML元素的data-xxxx属性，无需传递配置选项=Options | | { }；var $ this=document . getelementbyid(targetEle)，time=options . time | | $ this . data(' time ')，//Total time-毫秒是单位Final num=options。num | | $ this。数据('值')，//要显示的真实值是调节器=选项。调节器| | 100，//调节器，改变调节器的值可以调节数字变化的速度步长=finalnum/(时间/调节器)，/*每30毫秒增加一次值- */计数=0，///计数器初始值=0；var timer=setInterval(function(){ count=count step；if(count=FinalNum){ ClearInterval(计时器)；count=finalNum} //t如果没有改变，直接返回//避免调用text函数提高DOM性能var t=math . floor(count)；if(t==初始)返回；初始=t；$ this.innerHTML=initial}, 30);} numamotoplusanization(' time '，{time: 1500，num3360 12000，regulator : 50 })/script/body/html是本文的全部内容。希望对大家的学习有帮助，支持我们。