Home >Web Front-end >JS Tutorial >How to automatically increase numerical values in JavaScript
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('time'), //总时间--毫秒为单位
finalNum = options.num || $this.data('value'), //要显示的真实数值
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!