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

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

作者: MrOldK | 来源:发表于2018-04-18 22:49 被阅读12次

目前手上有一个项目,类似商城性质的,有签到,有金币累计。产品提了一个需求,当然,前篇一律,后加的。用户进入页面时,当前拥有的金币实现从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//变化速度
   })

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

相关文章

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

    目前手上有一个项目,类似商城性质的,有签到,有金币累计。产品提了一个需求,当然,前篇一律,后加的。用户进入页面时,...

  • 动画 | 数字增减变化

    不久前看到一篇在AE中制作数字增(减)变化动画的教程 但是!第一,苦于Ae技术有限,毕竟Ae界面让人看了就头昏眼花...

  • DOM-层级节点查找例子

    给出这样一个简单地购物车,通过JS实现增减和删除功能,增减的同时,小计部分也跟着变化 下面是HTML部分代码 CS...

  • Angular 动态增减表单项

    angular10 FormArray 实现动态增减表单项 场景一,动态增减项只有一个表单元素的时候: 场景二:...

  • 配置SASL SCRAM + ACL来实现动态增减用户

    以Kafka 2.3.0版本为例,实现通过配置SASL SCRAM + ACL来实现动态增减用户.以下是具体步骤 ...

  • 增减

    生活中的增减,每天什么是要完成的,什么想想意义不大的,重要的一天一点积累,不重要的就舍弃掉。精力也是有限的,什么该...

  • python 源码阅读(一)listObject

    python中 list的实现 python中的LIST非常强大,它既有数组的下标查询优势,又有链表这样动态增减的...

  • React-Native 组件封装与父子组件通信样例(初学)(二

    需求假设:封装自定义组件,可进行数字的自由增减,并在主页面进行求和联动 准备知识: 1. extends Comp...

  • js实现页面跳转的方式

    通过js或者html或者PHP等动态程序都可以方便的实现跳转,这里搜集了几种页面跳转的方式js方式的页面跳转 1....

  • 增减效应

    人际交往中的“增减效应”是指:任何人都希望对方对自己的喜欢能“不断增加”而不是“不断减少”。比如,许多销售员就是抓...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/umabkftx.html