<!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>
<!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>
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>
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>
原文：http://www.cnblogs.com/maopulas/p/7190875.html