数字递增效果
效果图下所示：
基础代码
1
2
3
4
5
6
7
8
9
10
11
12
|
<style>
body {
margin: 0;
}
div {
font-size: 300px;
background-color: coral;
text-align: center;
color: white;
}
</style>
<div>0</div>
|
实现思路
首先，数字递增效果的最终目的是改变div元素的文本内容，所以肯定要用到element.textContent='';递增效果其实就是利用了永久定时器，比如每相隔 50 毫秒，改变元素的文本内容，这个内容从 0 开始，可以每次加 4 试一下：
1
2
3
4
5
6
7
|
var div = document.querySelector("div");
var n = 0;
var m = 199;
setInterval(function() {
n += 4;
div.textContent = n;
}, 50);
|
这样写是不够的，变量m限制了 n 的最大值，所以当n+=4之后，发现n的值已经超过了目标值m，肯定要停止定时器，不需要再递增下去了。
1
2
3
4
5
6
7
8
9
10
|
var div = document.querySelector("div");
var n = 0;
var m = 199;
var timer = setInterval(function() {
n += 4;
if (n > m) {
clearInterval(timer);
}
div.textContent = n;
}, 50);
|
这样还没完，n最后一次递增 4 后的值是 200，按照代码的顺序，会继续把div的内容设为 200，如果在清楚定时器后添加return false，会导致div的文本内容停在 196,所以当发现n+=4的结果超过m值时，除了清除定时器，还应该把n的值直接设置为最大值m
1
2
3
4
5
6
7
8
9
10
11
|
var div = document.querySelector("div");
var n = 0;
var m = 199;
var timer = setInterval(function() {
n += 4;
if (n > m) {
n = m;
clearInterval(timer);
}
div.textContent = n;
}, 50);
|
案例源码