Heim >Web-Frontend >js-Tutorial >js reine Zahlen nacheinander stoppen Anzeigeeffekt Implementierung Code_Javascript-Fähigkeiten

js reine Zahlen nacheinander stoppen Anzeigeeffekt Implementierung Code_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:10:341474Durchsuche

JS reine Zahlen nacheinander stoppen den Implementierungscode für den Anzeigeeffekt

function showScore($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, pause, secand);
            times++;
            
          }, pause);


        }

        setValue(num, pause, secand);

      }

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

Der Effekt reiner Zahlen besteht darin, dass der Effekt nicht mehr einzeln angezeigt wird. Diese Zahl ändert sich beispielsweise ständig. Zuerst wird die erste Ziffer bestimmt, dann wird die zweite Ziffer bestimmt und dann wird die dritte Ziffer bestimmt. Da das Projekt nach einigen Tagen der Nutzung aufgegeben wurde, habe ich es gespeichert.

Der obige Implementierungscode von js Pure Numbers One by One Stop Display Effect ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass Sie Script Home unterstützen.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn