首页 > 编程 > JavaScript > 正文

利用JS实现数字增长

2019-11-20 09:23:00
字体:
来源:转载
供稿:网友

上次在项目中碰到要实现数字增长的效果,实现数字从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是否在可视区然后调用。

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表