利用JS实现数字增长

 更新时间:2016年07月28日 17:26:26   投稿:daisy  
做项目时候常常遇到,要做一个数字滚动增加的效果。如何利用JavaScript实现数字增长效果,一起来跟本文学习学习。

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

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

主要思路就两部分

    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是否在可视区然后调用。

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

相关文章

  • 微信小程序中data-key属性之数据传输(经验总结)

    微信小程序中data-key属性之数据传输(经验总结)

    这篇文章主要介绍了微信小程序中data-key属性:数据传输,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 一些手写JavaScript常用的函数汇总

    一些手写JavaScript常用的函数汇总

    这篇文章主要给大家介绍了一些手写的JavaScript常用的函数,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 微信小程序自定义顶部导航栏并适配不同机型实例详解

    微信小程序自定义顶部导航栏并适配不同机型实例详解

    这篇文章主要为大家介绍了微信小程序开发自定义顶部导航栏并适配不同机型的实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • 小程序实现新用户判断并跳转激活的方法

    小程序实现新用户判断并跳转激活的方法

    这篇文章主要介绍了小程序实现新用户判断并跳转激活的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • WebRTC媒体权限申请getUserMedia实例详解

    WebRTC媒体权限申请getUserMedia实例详解

    这篇文章主要为大家介绍了WebRTC媒体权限申请getUserMedia实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • JS实现电子时钟入门操作

    JS实现电子时钟入门操作

    这篇文章主要为大家详细介绍了JS实现电子时钟入门操作,实现带有表盘的时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • Bootstrap 表单验证formValidation 实现表单动态验证功能

    Bootstrap 表单验证formValidation 实现表单动态验证功能

    这篇文章主要介绍了Bootstrap 表单验证formValidation 实现表单动态验证功能,需要的朋友可以参考下
    2017-05-05
  • 原生js实现简单的链式操作

    原生js实现简单的链式操作

    这篇文章主要介绍了原生js实现简单的链式操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • innerHTML中标签可以换行的方法汇总

    innerHTML中标签可以换行的方法汇总

    本文给大家分享的是一个在javascript中使用innerhtml输出的时候如何实现换行的小技巧,其实很简单,在需要换行的地方加上\即可
    2015-08-08
  • JS实现简单贪吃蛇小游戏

    JS实现简单贪吃蛇小游戏

    这篇文章为大家详细主要介绍了JS实现简单贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10

最新评论