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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
jQuery实现文档树效果
Feb 20 Javascript
Vue实现点击后文字变色切换方法
Feb 11 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php 中include()与require()的对比
2006/10/09 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
php微信公众号开发之简答题
2018/10/20 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Tensorflow累加的实现案例
2020/02/05 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python定时截屏实现
2020/11/02 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
网络优化专员求职信
2014/05/04 职场文书
保密工作承诺书
2014/08/29 职场文书
个人合伙协议书范本
2014/10/14 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
丧事酒宴答谢词
2015/09/30 职场文书