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 相关文章推荐
javascript Object与Function使用
Jan 11 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
js Proxy的原理详解
May 25 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
List Installed Software Features
2007/06/11 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
script标签属性用type还是language
2015/01/21 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
深入理解Python3中的http.client模块
2017/03/29 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
浅析Python 序列化与反序列化
2020/08/05 Python
python中random模块详解
2021/03/01 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
外语系毕业生自荐信范文
2013/12/16 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
简单租房协议书
2014/04/09 职场文书
会议接待欢迎标语
2014/10/08 职场文书
团队会宣传标语
2014/10/09 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
初一语文教学反思
2016/03/03 职场文书
创业计划书之餐饮
2019/09/02 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python