JS实现数值自动增加动画
来源:互联网 发布:闪讯网络电缆没有连接 编辑:程序博客网 时间:2024/05/18 02:04
JS实现数值自动增加动画,效果图如下:
话不多说,直接上代码,注释比较详细。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>数字自动增加</title></head><body><h1 id="time">0</h1><script>//数字自增到某一值动画参数(目标元素,自定义配置)function NumAutoPlusAnimation(targetEle, options) {/*可以自己改造下传入的参数,按照自己的需求和喜好封装该函数*///不传配置就把它绑定在相应html元素的data-xxxx属性上吧options = options || {};var $this = document.getElementById(targetEle),time = options.time || $this.data('time'), //总时间--毫秒为单位finalNum = options.num || $this.data('value'), //要显示的真实数值regulator = options.regulator || 100, //调速器,改变regulator的数值可以调节数字改变的速度step = finalNum / (time / regulator),/*每30ms增加的数值--*/count = 0, //计数器initial = 0;var timer = setInterval(function() {count = count + step;if(count >= finalNum) {clearInterval(timer);count = finalNum;}//t未发生改变的话就直接返回//避免调用text函数,提高DOM性能var t = Math.floor(count);if(t == initial) return;initial = t;$this.innerHTML = initial;}, 30);}NumAutoPlusAnimation("time", {time: 1500,num: 12000,regulator: 50})</script></body></html>
阅读全文
0 0
- JS实现数值自动增加动画
- 类似余额宝数值增加的动画
- 用js实现自动打字动画效果
- 织梦自动增加数值标签
- JS实现点击按钮自动增加一个单元格
- Js实现下拉滚动条(导航滚动数值>100的话自动吸附在TOP上)
- log实现自动增加行号
- JS实现动画
- js实现动画效果
- js实现帧动画
- js实现轮播图动画
- JS动画实现
- JS点击按钮自动增加一行
- JS实现页面数值滚动显示
- WPF中自动增加行(动画)的TextBox
- oracle中实现主键的自动增加
- oracle中实现主键的自动增加
- Oralce表添加自动增加列实现.
- PIM-DM/SM (2)(协议包的区别)
- js弹幕效果_js弹幕滚动_源代码_写法!
- SAS 中 PROC SQL过程步详解
- 微信和支付宝的被动扫码支付
- 后缀自动机(SAM)学习小记
- JS实现数值自动增加动画
- 用java.util.Properties类读取属性文件的内容,或者把属性写到xml文件中
- IE下的hack
- 3364-数据结构实验之图论八:欧拉回路
- 最详细的Android贪吃蛇,人人都学的会
- Linux下的rar和unrar命令的使用
- DrawerLayer+NavigationView 实现侧滑菜单
- OpenGL ES基础教程
- java将list写入到excel中并导出到本地(POI)