上次在项目中碰到要实现数字增长的效果,实现数字从0到目标数的增长,来看看效果图
现在把它扩展开来可以实现不同效果
主要思路就两部分
1.每隔三个数字之间加上,
2.实现动起来
对于1使用正则来完成十分的方便
1 ? '.' + arr[1] : "";
reg = /(\d+)(\d{3})/;
if (this.option.isfomat) {
while (reg.test(x1)) {
x1 = x1.replace(reg,'$1' + "," + "$2");
}
}
if (this.option.isfomat) {
return this.option.prefix + x1 + x2;
} else {
return this.option.prefix + str;
}
}
要实现加起来的效果可以使用requestAnimationFrame
方法,然后处理一下兼容就可以了。
rush:js;">
var change = function() {
var p = Math.min(1.0,(new Date().getTime() - that.startTime) / that.option.duration);//当前时间减去开始时间,然后除以总时间,Math.min,两个数取最小值。
var nums = that.num * p;
that.elm.innerHTML = that.fomatNum(that.num * p);
if (p < 1.0) {//
requestAnimationFrame(function() {
change();
});
} else {
cancelAnimationFrame(change);
}
}
requestAnimationFrame(function() {
change();
});
如果要实现数字在可视区再动起来的效果,可以自己监听dom是否在可视区然后调用。
以上就是本文的全部内容,如果有疑问欢迎大家留言探讨,也谢谢大家对编程之家的支持。
原文地址:https://www.jb51.cc/js/47013.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。