js 实现数字动态累加 打开页面就开始增减或者变化后增减

2018-04-18  本文已影响12人  MrOldK

目前手上有一个项目,类似商城性质的,有签到,有金币累计。产品提了一个需求,当然,前篇一律,后加的。用户进入页面时,当前拥有的金币实现从0动态增加到当前数量,而不是直接变化到当然数量,也就是看的见的从0,1,2,3.......100的增加。直接想到了n++,后来在实现的过程中,如果数值特别大,例如1000+,这样过程稍长。由于懒神经发作,百度了一下,没有想要的答案,索性自己就简单的封装一个。

function NumChange(opt){
   var dft = {
       el:'#box',//className.index会默认为0
       begin:40,
       end:57,
       speed:30,
   }
   opt&&typeof opt === 'object'?(function(){
       for(var i in dft){
                       !opt[i]?opt[i] = dft[i]:''
       }
   })():opt = dft
   opt.el = opt.el.indexOf('.') >-1?document.getElementsByClassName(opt.el.substring(1,opt.el.length))[0]:document.getElementById(opt.el.substring(1,opt.el.length))
   this.reverse = opt.end - opt.begin>0?1:0;//判断增减
   this.levelArr = [];//存储每位每次增加的数 Example:[1000,100,10,1]
   this.rankArr = [];//存储每位数 Example:[4,8,5,3]
   this.splitToArr = function(){
       var differ = (opt.end - opt.begin)>0?opt.end - opt.begin:opt.begin-opt.end;
       var differL = differ.toString().length;
       this.rankArr = differ.toString().split('').reverse();
       for(var i=differL-1;i>-1;i--){
           var level = Math.pow(10,differL-i-1);
           this.levelArr.push(level);
       }
   };
   this.interval = function(){
       this.splitToArr();
       var o = {} || null;
               o.reverse = this.reverse;
       o.levelArr = this.levelArr;
       o.rankArr = this.rankArr;
       o.rankArrL =o.rankArr.length;
       o.result = opt.begin;//初始值
       o.timer = null;
       o.index = 0;//每一位的索引值
       o.circle = 0;//每一位数值加减次数
       o.interval = function(){
           if(o.index == o.rankArrL){
               clearInterval(o.timer)
               o.timer = null;
           }else{
               o.circle == o.rankArr[o.index] && o.rankArr[o.index] !=0?(function(){
                   o.circle = 0;
                   o.index++;
               })():'';
               opt.el.innerHTML = o.result;
               o.rankArr[o.index] == 0?(function(){
                   o.result+=0;
                   o.index++;
               })():(function(){
                   o.reverse==1?o.result+=o.levelArr[o.index]:o.result-=o.levelArr[o.index];
                   o.circle++;
               })()
           }
       }
       o.timer = setInterval(o.interval,opt.speed);
   };
   this.init = function(){
       opt.end == opt.el.innerHTML?'':this.interval(); 
   }
   this.init();
}


//调用
new NumChange({
       el:'#box',//放置数值的element
       begin:346,//初始数值
       end:598,//最终数值
       speed:30//变化速度
   })

目前这个只是针对整数类型的,浮点类型的没有做处理,由于时间紧,满足通用需求就行。

上一篇 下一篇

猜你喜欢

热点阅读