JavaScript实现数值自动增加动画

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Jquery中增加参数与Json转换代码
  • MYSQL数据库中的现有表增加新字段（列）
  • php 数组操作(增加，删除，查询，排序)等函数说明
  • Apache增加最大连接数的方法
  • 数据库中两张表之间的数据同步增加、删除与更新实现思路
  • json数据处理技巧(字段带空格、增加字段、排序等等)
  • 为jquery的ajaxfileupload增加附加参数的方法
  • jquery对table中各数据的增加、保存、删除操作示例
  • JavaScript数组Array对象增加和删除元素方法总结
  • js简单实现表单中点击按钮动态增加输入框数量的方法
  • jQuery实现立体式数字滚动条增加效果
  • jQuery实现立体式数字动态增加（animate方法）
  • js实现增加数字显示的环形进度条效果
赞 (0)

相关推荐

  • 为jquery的ajaxfileupload增加附加参数的方法

    直接说方法: 复制代码 代码如下: $.ajaxFileUpload({data:{"a":123,"b":456};//附加参数,json格式}); 然后在ajaxFileUpload.js文件中修改两个函数,其实就是一个函数(给函数添加新的参数) 第一处: 复制代码 代码如下: createUploadForm: function(id, fileElementId,data){}大于在26行吧. 然后在在函数体中加入以下代码: 复制代码 代码如下: if (d

  • jQuery实现立体式数字动态增加（animate方法）

    jQuery实现立体式数字动态增加（animate方法）

    1.HTML结构 <div class="integral">已有<span class="ii"></span>积分</div> 2.js <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src

  • js实现增加数字显示的环形进度条效果

    js实现增加数字显示的环形进度条效果

    效果如下: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <link> <meta name="page-view-size" content="640*530"> <meta http-equiv="Content-Type" content="text/

  • json数据处理技巧(字段带空格、增加字段、排序等等)

    1.json数据的正常取值:json[i].fieldName 2.json数据的字段带空格:eval('json[' + i + ']["' + field + '"]') 3.json数据的赋值:eval('json[' + i + ']["' + field + '"]=' + jsonFilter.length); 4.json数据增加字段:循环所有数据,直接json[i].newField=defaultValue就可以了 5.json数据的排序:相当于数

  • php 数组操作(增加，删除，查询，排序)等函数说明第1/2页

    数据增加,删除,查询,排序详细说明 对数组的添加(首尾数据添加(不限定条数)以及中间任意位置添加数据操作) . 2-对数组的删除(首尾的数据删除(不限定条数)以及中间任意位置的数据删除操作,条件:对数组中间位置删除的,后面的值往前挪,接上以前的位置) . 3-对数据的排序操作(排序操作,要的是效率) . 4-对数组的查询(对数组中的某一数据进行查询,如果满足,则生成新的数组,这个新的数组就是满足查询条件的,条件:查询,并不是查询某一个值,还有查询某一个值满足某个条件,举个例子:查询数组中某个值大

  • 数据库中两张表之间的数据同步增加、删除与更新实现思路

    分别创建增加.删除.更新的触发器(Trigger)来达到两张表之间数据同步的目的. 1:数据同步增加: 如有两张表--A表和B表,创建触发器使当A表插入数据后B表也同步插入数据.其中B表插入数据的字段需要同A表中的字段相对应. 复制代码 代码如下: CREATE TRIGGER 触发器名称 ON A表 AFTER INSERT AS BEGIN INSERT INTO B表(B表字段1,B表字段2,B表字段3) SELECT A表字段1,A表字段2,A表字段3 FROM INSERTED END

  • jQuery实现立体式数字滚动条增加效果

    jQuery实现立体式数字滚动条增加效果

    jquery实现立体式数字滚动条增加效果,代码分为两部分,一部分位html结构另一部分属于js代码段,需要的朋友参考下吧! 1.html结构 <div class="numberRun1"></div> 2.js <script type="text/javascript" src="js/digital_over.js" ></script>//引用 //这是自定义函数(需要在页面中进行调用) &

  • MYSQL数据库中的现有表增加新字段（列）

    复制代码 代码如下: ALTER TABLE `数据库名`.`表名` ADD COLUMN `PROCID` VARCHAR(6) DEFAULT '' AFTER `PPIDChanged`; --在MYSQL中,如果是表名,数据库名,列名,在你增加,修改,更新的时候都需要使用ESC键盘下的重音符号,才可以添加,相应的列名或者更新修改. 当然现在大多都是用phpmyadmin或mysql图形化操作工具,更方法,这样的是临时使用的,或没有图形界面的方法.大家可以使用上述的图形化工具操作. 下面推

  • js简单实现表单中点击按钮动态增加输入框数量的方法

    js简单实现表单中点击按钮动态增加输入框数量的方法

    本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • JavaScript数组Array对象增加和删除元素方法总结

    本文实例总结了JavaScript数组Array对象增加和删除元素方法.分享给大家供大家参考.具体分析如下: pop 方法 移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 如果该数组为空,那么将返回 undefined. shift 方法 移除数组中的第一个元素并返回该元素. arrayObj.shift( ) 必选的 arrayObj 引用是一个 Array 对象. 说明 shift 方法可移除数组中的第一

  • jquery对table中各数据的增加、保存、删除操作示例

    jquery对table中各数据的增加、保存、删除操作示例

     像这种页面,我们往往不是通过提交表单来处理这些数据,因为如果在后台去遍历处理这些大量的数据是非常繁琐的:比较好的做法是在前台页面中将数据以对象形式保存在json中,然后在后台直接将json转换成我们需要的对象,这样我们的直接可以处理对象了! 添加按钮 复制代码 代码如下: <input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTe

  • Jquery中增加参数与Json转换代码

    在jquery中,使用$("#myform").serialize()可以将表单的内容构造成一个querystring,例如width=1680&height=1050这样的表达式,可以转化为json 表达式{"width":"1680","height":"1050"}. 有时候,我们需要进一步转化为json表达式,参考Ext中的Ext.urlDecode函数,我们可以实现一个相应的jquery中

  • Apache增加最大连接数的方法

    MaxClients n 1.apache1.x n是整数,表示最大连接数,取值范围在1和256之间,如果要让apache支持更多的连接数,那么需要修改源码中的httpd.h文件,编辑/httpd-2.0.59/include/httpd.h中的HARD_SERVER_LIMIT值改大然后再编译. 增加apache最大连接数的方法: 在httpd.conf中设置: MaxClients n n是整数,表示最大连接数,取值范围在1和256之间,如果要让apache支持更多的连接数,那么需要修改源码

随机推荐