利用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 相关文章推荐
JavaScript也谈内存优化
Jun 06 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
javascript数据类型验证方法
Dec 31 Javascript
浅谈js中对象的使用
Aug 11 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
编写React组件项目实践分析
Mar 04 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 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
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
CodeIgniter与PHP5.6的兼容问题
2015/07/16 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
代码生成器 document.write()
2007/04/15 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
详解Python locals()的陷阱
2019/03/26 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
期中考试后的感想
2015/08/07 职场文书
班委竞选稿范文
2015/11/21 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers
win sever 2022如何占用操作主机角色
2022/06/25 Servers
全网非常详细的pytest配置文件
2022/07/15 Python