利用JS实现数字增长
网络编程 2021-07-04 20:00www.168986.cn编程入门
做项目时候常常遇到,要做一个数字滚动增加的效果。如何利用JavaScript实现数字增长效果,一起来跟本文学习学习。
上次在项目中碰到要实现数字增长的效果,实现数字从0到目标数的增长,来看看效果图
现在把它扩展开来可以实现不同效果
主要思路就两部分
1.每隔三个数字之间加上,
2.实现动起来
对于1使用正则来完成十分的方便
this.fomatNum = function(num) { var str = num.toFixed(this.option.decimal);//精确到小数位数多少位 var num1, x1, x2, reg; arr = str.split("."); x1 = arr[0]; x2 = arr.length > 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
方法,然后处理一下兼容就可以了。
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是否在可视区然后调用。
以上就是本文的全部内容,如果有疑问欢迎大家留言探讨,也谢谢大家对狼蚁SEO的支持。
上一篇:一个仿微博登陆邮箱提示框js开发案例
下一篇:灵活使用数组制作图片切换js实现
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程