Heim > Artikel > Web-Frontend > So erhöhen Sie numerische Werte in JavaScript automatisch

So erhöhen Sie numerische Werte in JavaScript automatisch

亚连Original: 2018-06-14 17:14:444536Durchsuche

Dieser Artikel stellt hauptsächlich JavaScript vor, um die automatische numerische Erhöhungsanimation zu realisieren. Interessierte Freunde können sich auf

JS beziehen, um die automatische numerische Erhöhungsanimation zu realisieren:

Es gibt nicht viel zu sagen, gehen Sie einfach direkt zum Code mit detaillierteren Kommentaren.

<!DOCTYPE html> 
<html> 
 
 <head> 
  <meta charset="UTF-8"> 
  <title>数字自动增加</title> 
 </head> 
 
 <body> 
  <h1 id="time">0</h1> 
 
  <script> 
   //数字自增到某一值动画参数（目标元素,自定义配置） 
   function NumAutoPlusAnimation(targetEle, options) { 
 
    /*可以自己改造下传入的参数，按照自己的需求和喜好封装该函数*/ 
    //不传配置就把它绑定在相应html元素的data-xxxx属性上吧 
    options = options || {}; 
 
    var $this = document.getElementById(targetEle), 
     time = options.time || $this.data(&#39;time&#39;), //总时间--毫秒为单位 
     finalNum = options.num || $this.data(&#39;value&#39;), //要显示的真实数值 
     regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度 
 
     step = finalNum / (time / regulator),/*每30ms增加的数值--*/ 
     count = 0, //计数器 
     initial = 0; 
 
    var timer = setInterval(function() { 
 
     count = count + step; 
 
     if(count >= finalNum) { 
      clearInterval(timer); 
      count = finalNum; 
     } 
     //t未发生改变的话就直接返回 
     //避免调用text函数，提高DOM性能 
     var t = Math.floor(count); 
     if(t == initial) return; 
 
     initial = t; 
 
     $this.innerHTML = initial; 
    }, 30); 
   } 
 
   NumAutoPlusAnimation("time", { 
    time: 1500, 
    num: 12000, 
    regulator: 50 
   }) 
  </script> 
 
 </body> 
 
</html>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwendung von Selen zur Erfassung von Taobao-Dateninformationen

Konzept und Verwendung des Befehlsmodus in JS (ausführliches Tutorial)

Wie implementiert man Rückrufe mit Promise im WeChat-Applet?

Das Problem, dass Electron nicht mit npm installiert werden kann

Verwendung von fullpage.js zum Implementieren des Scrollens

Das obige ist der detaillierte Inhalt vonSo erhöhen Sie numerische Werte in JavaScript automatisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Vorheriger Artikel：So verwenden Sie Swiper zum Implementieren der PaginierungNächster Artikel：So verwenden Sie Swiper zum Implementieren der Paginierung

In Verbindung stehende Artikel

Mehr sehen