源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

利用JS实现数字增长

  • 时间:2021-03-20 04:24 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:利用JS实现数字增长
上次在项目中碰到要实现数字增长的效果,实现数字从0到目标数的增长,来看看效果图 [img]http://files.jb51.net/file_images/article/201607/2016728172042822.gif?2016628172057[/img] 现在把它扩展开来可以实现不同效果 [img]http://files.jb51.net/file_images/article/201607/2016728172132051.gif?2016628172144[/img] [b]主要思路就两部分[/b]     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;
      }
    }
要实现加起来的效果可以使用[code]requestAnimationFrame[/code]方法,然后处理一下兼容就可以了。
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是否在可视区然后调用。 以上就是本文的全部内容,如果有疑问欢迎大家留言探讨,也谢谢大家对编程素材网的支持。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部