利用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 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
Javascript实现打鼓效果
Jan 29 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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
javascript AutoScroller 函数类
2009/05/29 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
js闭包的用途详解
2014/11/09 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python模块的制作方法实例分析
2019/12/21 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python新手学习可变和不可变对象
2020/06/11 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
为什么需要版本控制
2016/10/28 面试题
会计与审计毕业生自荐信范文
2013/12/30 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
导游词300字
2015/02/13 职场文书
公司出差管理制度范本
2015/08/05 职场文书
2016党校学习心得体会
2016/01/07 职场文书
《穷人》教学反思
2016/02/19 职场文书
合作合同协议书
2016/03/21 职场文书