search

Home >Web Front-end >JS Tutorial >How to automatically increase numerical values ​​in JavaScript

How to automatically increase numerical values ​​in JavaScript

亚连
亚连Original
2018-06-14 17:14:444599browse

This article mainly introduces JavaScript to realize automatic numerical value increase animation in detail, which has certain reference value. Interested friends can refer to

JS to realize numerical value automatic increase animation. The rendering is as follows ：

Not much to say, just go to the code with more detailed comments. 

<!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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Using selenium to capture Taobao data information

Concept and usage of command mode in JS (detailed tutorial)

How does the WeChat applet use Promise to implement callbacks?

The problem of failure to install Electron using npm

Using fullpage.js to implement scrolling

The above is the detailed content of How to automatically increase numerical values ​​in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use Swiper to implement paginationNext article：How to use Swiper to implement pagination

Related articles

See more