Maison  >  Article  >  interface Web  >  Comment augmenter automatiquement les valeurs numériques en JavaScript

Comment augmenter automatiquement les valeurs numériques en JavaScript

亚连
亚连original
2018-06-14 17:14:444549parcourir

Cet article présente principalement JavaScript pour réaliser une animation d'augmentation numérique automatique en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

JS pour réaliser une animation d'augmentation numérique automatique. >

Pas grand chose à dire, il suffit d'aller directement dans le code avec des commentaires plus détaillés.

<!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>
J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Utiliser le sélénium pour capturer les informations des données Taobao

Concept et utilisation du mode commande en JS (tutoriel détaillé)

Comment implémenter des rappels à l'aide de Promise dans l'applet WeChat ?

Le problème de l'échec de l'installation d'Electron à l'aide de npm

Utilisation de fullpage.js pour implémenter le défilement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn