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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
JS实现公告上线滚动效果
Jan 10 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
php 在线打包_支持子目录
2008/06/28 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
JS实现图片切换效果
2018/11/17 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python判断字符串与大小写转换
2015/06/08 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
使用python实现画AR模型时序图
2019/11/20 Python
Python enumerate内置库用法解析
2020/02/24 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
绿色家庭事迹材料
2014/05/01 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
2014年人事科工作总结
2014/11/19 职场文书
创建文明城市倡议书
2015/04/28 职场文书