利用JS实现数字增长


Posted in Javascript onJuly 28, 2016

上次在项目中碰到要实现数字增长的效果,实现数字从0到目标数的增长,来看看效果图

利用JS实现数字增长

现在把它扩展开来可以实现不同效果

利用JS实现数字增长

主要思路就两部分

    1.每隔三个数字之间加上,

    2.实现动起来

对于1使用正则来完成十分的方便

this.fomatNum = function(num) {
      var str = num.toFixed(this.option.decimal);//精确到小数位数多少位
      var num1, x1, x2, reg;
      arr = str.split(".");
      x1 = arr[0];
      x2 = arr.length > 1 ? '.' + arr[1] : "";
      reg = /(\d+)(\d{3})/;
      if (this.option.isfomat) {
        while (reg.test(x1)) {
          x1 = x1.replace(reg, '$1' + "," + "$2");
        }
      }
      if (this.option.isfomat) {
        return this.option.prefix + x1 + x2;
      } else {
        return this.option.prefix + str;
      }
    }

要实现加起来的效果可以使用requestAnimationFrame方法,然后处理一下兼容就可以了。

var change = function() {
  var p = Math.min(1.0, (new Date().getTime() - that.startTime) / that.option.duration);//当前时间减去开始时间,然后除以总时间,Math.min,两个数取最小值。
  var nums = that.num * p;
  that.elm.innerHTML = that.fomatNum(that.num * p);
  if (p < 1.0) {//
     requestAnimationFrame(function() {
        change();
     });
   } else {
        cancelAnimationFrame(change);
       }
  }
  requestAnimationFrame(function() {
     change();
   });

如果要实现数字在可视区再动起来的效果,可以自己监听dom是否在可视区然后调用。

以上就是本文的全部内容,如果有疑问欢迎大家留言探讨,也谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
YUI模块开发原理详解
Nov 18 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
灵活使用数组制作图片切换js实现
Jul 28 #Javascript
AngularJS 中文API参考手册
Jul 28 #Javascript
AngularJS 简单应用实例
Jul 28 #Javascript
AngularJS 路由详解和简单实例
Jul 28 #Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 #Javascript
AngularJS中实现动画效果的方法
Jul 28 #Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 #Javascript
You might like
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
asp批量修改记录的代码
2008/06/25 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
JavaScript动态绑定详解
2017/09/14 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python selenium操作cookie的实现
2020/03/18 Python
python如何导入依赖包
2020/07/13 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记