1. animation;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#box {
width: 600px;
height: 30px;
background-color: #ccc;
}
#move {
width: 100%;
height: 100%;
background-color: #f00;
animation: name 5s linear paused;
}
@keyframes name {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<div id="box">
<div id="move"></div>
</div>
<button onclick="change(this)">开始</button>
<script>
//获取元素
var box = document.getElementById("box");
var move = document.getElementById("move");
var btn = document.getElementsByTagName("button")[0];
//开关控制
function change(btn) {
if (btn.innerHTML == ‘开始‘) {
btn.innerHTML = ‘暂停‘;
move.style.animationPlayState = ‘running‘;
} else {
btn.innerHTML = ‘开始‘;
move.style.animationPlayState = ‘paused‘;
}
}
</script>
</body>
</html>
2.setInterval();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#box {
width: 500px;
height: 30px;
background-color: #ccc;
}
#move {
width: 0%;
height: 100%;
background-color: #f00;
}
</style>
</head>
<body>
<div id="box">
<div id="move"></div>
</div>
<button onclick="change(this)">开始</button>
<script>
var box = document.getElementById("box");
var move = document.getElementById("move");
var timer = null;
var n = 0;
function change(btn) {
if (btn.innerHTML == ‘开始‘) {
btn.innerHTML = ‘暂停‘;
timer = setInterval(run, 100);
} else {
btn.innerHTML = ‘开始‘;
clearInterval(timer);
}
}
function run() {
if (n > 100) {
clearInterval(timer);
return;
} //需要先进行判断 否则会出现进度条加载满后 点击开始按钮 单次增加进度条
console.log(n);
move.style.width = n + ‘%‘;
n++;
}
</script>
</body>
</html>
3.setTimeout();
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <style>
7 #box {
8 width: 500px;
9 height: 30px;
10 background-color: #ccc;
11 }
12
13 #move {
14 width: 0;
15 height: 30px;
16 background-color: #f00;
17 }
18 </style>
19 </head>
20
21 <body>
22 <div id="box">
23 <div id="move"></div>
24 </div>
25 <button onclick="run(this)">开始</button>
26 <script>
27 //获取元素
28 var box = document.getElementById("box");
29 var move = document.getElementById("move");
30 //按钮事件
31 function run(btn) {
32 if (btn.innerHTML == ‘开始‘) {
33 btn.innerHTML = ‘暂停‘;
34 running();
35 } else {
36 btn.innerHTML = ‘开始‘;
37 clearTimeout(timer);
38 return;
39 }
40 }
41 var n = 0;
42 var timer;
43
44 function running() {
45 if (n > 100) {
46 clearTimeout
47 return (timer);
48 }
49 console.log(n);
50 move.style.width = n + ‘%‘;
51 n++;
52 timer = setTimeout(running, 1000);
53 }
54 </script>
55 </body>
56
57 </html>
4.进阶版
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <style>
7 #box {
8 width: 600px;
9 height: 25px;
10 background-color: #ccc;
11 }
12
13 #small {
14 width: 0%;
15 height: 25px;
16 background-color: #f00;
17 text-align: center;
18 color: #fff;
19 }
20 </style>
21 </head>
22
23 <body>
24 <div id="box">
25 <div id="small"></div>
26 </div>
27 <script>
28 //获取元素
29 var box = document.getElementById("box");
30 var small = document.getElementById("small");
31
32 var timer = null;
33 timer = setInterval(function() {
34 small.style.width = small.offsetWidth + 10 + ‘px‘;
35 var iWidth = small.offsetWidth / box.offsetWidth * 100;
36 small.innerHTML = Math.round(iWidth) + ‘%‘;
37 if (iWidth == 100) {
38 clearInterval(timer);
39 }
40 }, 100);
41 </script>
42 </body>
43
44 </html>
时间： 2024-10-20 08:58:12