JavaScript实现数值自动增加动画


Posted in Javascript onDecember 28, 2017

JS实现数值自动增加动画,效果图如下:

JavaScript实现数值自动增加动画

话不多说,直接上代码,注释比较详细。

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 #Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 #Javascript
JS实现带动画的回到顶部效果
Dec 28 #Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 #Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 #Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 #Javascript
vue获取dom元素注意事项
Dec 28 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
javascript制作2048游戏
2015/03/30 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
TensorFlow实现Logistic回归
2018/09/07 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python with语句和过程抽取思想
2019/12/23 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
商务助理岗位职责
2013/11/13 职场文书
大学军训自我鉴定
2013/12/15 职场文书
临床护士自荐信
2014/01/31 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
西式结婚主持词
2014/03/14 职场文书
解除同居协议书
2015/01/29 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python