用js实现数字增长

用js实现数字增长
上次在项目中实现数字增长的效果,实现了从0个数字到目标数的增加,看到效果图。
现在扩展它可以产生不同的效果。
其主要思想是两部分。

1。每增加三个数字,
2。移动
1用普通的东西很方便。
this.fomatnum =功能(NUM){
var str = num.tofixed(这个选项。小数); / /精确到小数
VaR num1,X1,X2,REG;
ARR = str.split(,);
X1 = ARR { 0 };
X2 = arr.length + ARR { 1 } > 1。:;
注册表( +)( { 3 });
如果(这个选项。isfomat){
而(reg.test(X1)){
X1 = x1.replace(REG,1美元+
}
}
如果(这个选项。isfomat){
返回this.option.prefix + X1 + X2;
{人}
返回this.option.prefix + STR;
}
}
为了达到效果,你可以使用requestanimationframe方法,然后处理兼容性
var =函数(){()
VaR(1,P = math.min(新)日期(。时间)-(,StartTime) /。选项。持续时间); / /当前时间减去开始时间,然后除以总时间,Math.min,两个数最小。
VaR号= that.num * P;
that.elm.innerhtml = that.fomatnum(that.num * P);
如果(p<1){ / /
RequestAnimationFrame(function(){()
变化();
});
{人}
cancelanimationframe(变化);
}
}
RequestAnimationFrame(function(){()
变化();
});
如果你想在视觉区域实现数字的效果,你可以在视觉区域监控DOM,然后调用它。

以上是本文的全部内容,如果有问题欢迎您来讨论留言,并谢谢您的支持
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部