10timer.md
goer ... 2022-01-05 小于 1 分钟
[toc]
# 定时器
# 1. 单次定时器
setTimeout():只执行一次
// 1第一个参数就是 执行函数，所有第一先写函数
function aa(){
console.log('who')
}
// 2 第个参数就是时间
// 1s = 1000
setTimeout(aa,2000);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
clearsetTimeout:清除单次循环
var a = setTimeout(aa,2000);
clearTimeout(a);
1
2
2
# 2 .循环定时器
setInterval():循环执行函数代码
clearInterval(): 清除循环定时器
var a =0;
function add(){
document.write('<span onclick="stop();">''+i+'</span>')
a++;
}
var b = setInterval(add,1000) // 1秒执行函数
// 点击span i清除，再点击又继续
var c = true;
function stop(){
if(c){
clearInterval(b);
c=false;
}else{
b=setInterval(add,1000);
c=true;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
body{
background-color: #000;;
}
#box{
font-size: 40px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: fontbig .5s;
font-weight: bold;
}
@keyframes fontbig{
from{
transform:translate(-50%,-50%) scale(.4);
}
to{
transform:translate(-50%,-50%) scale(1);
}
}
</style>
<body>
<div id="big">
<div id="box">5</div>
</div>
<script type="text/javascript">
var a = setInterval(() => {
var h = box.innerHTML;
h--;
big.innerHTML = '<div id="box">'+h+'</div>';
if(h==0){
box.innerHTML = '发射！！！';
box.style.color = 'red'
clearInterval(a);
}
}, 1000);
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43