利用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 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
灵活使用数组制作图片切换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的5个入手程序
2006/11/23 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
javascript实现的动态文字变换
2007/07/28 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
自荐信格式的六要素
2013/09/21 职场文书
2014年销售工作总结
2014/12/01 职场文书
五好家庭事迹材料
2014/12/20 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫