js纯数字逐一停止显示效果的实现代码

前端之家收集整理的这篇文章主要介绍了js纯数字逐一停止显示效果的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

js纯数字逐一停止显示效果的实现代码

score($ele,num,secand,pause){ //second 按照秒数,动画运行多少秒 if (!secand) { secand = 2;} if (!pause) { pause = 20;}
    var len = String(num).length;

    var temnum,times = 0,stepTimes,max ;
    var numArr = String(num).split("");


    function getRandom(n){
      var num = Math.floor(Math.random()*(Math.pow(10,n)-1 - Math.pow(10,n-1))+Math.pow(10,n-1));

      if (String(num).length !== n) {num = getRandom(n);}

      return num;
    }

    function setValue(num,pause,secand){//second 运行多少秒后停止
      var len = String(num).length,j=0;

      if (!stepTimes) {
        max = Math.ceil(secand*1000/len);
        stepTimes = Math.ceil(max/pause);
      }

      temnum = "";
      setTimeout(function(){
        for (var i = 1; i <= len; i++) {
          if (times >= stepTimes*i) {
            j++;
            temnum += numArr[i-1]+"";
          }else{
            break;
          }
        };

        if (j < len) {
          $ele.html(temnum+""+getRandom(len-j));
        }else{
          $ele.html(temnum);
        }


        if (times >= max || j >= len) {return;};

        setValue(num,secand);
        times++;

      },pause);


    }

    setValue(num,secand);

  }

showscore($(".num"),2344,1.5,10);

效果纯数字逐一停止显示效果,比如这个个数字不停的变化,第一位先定下来,第二位再确定,然后第三位再确定下来。因为项目用了几天废弃,所以存下档。

以上这篇js纯数字逐一停止显示效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/49670.html

猜你在找的JavaScript相关文章