刚开始学js,怎么实现进度条暂停继续功能，希望能详细解释一下（小白一个）[face]monkey2:
刚开始学js,怎么实现进度条暂停继续功能，希望能详细解释一下（小白一个）[face]monkey2:019.png[/face]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
进度条
</title>
</head>
<style>
#myProgress{ width: 100%;; height: 30px; position: relative; background-color:
#FF7F50; overflow: hidden; } #myBar{ background-color: greenyellow; width:
10px; height: 30px; position: absolute; text-align: center; line-height:
30px; color: #FF7F50; } #bt{ border-radius: 15px; }
</style>
<body background="../img/bj.jpg">
<h1 align="center">
进度条
</h1>
<div id="myProgress" style="border-radius: 15px;">
<div id="myBar" style="width: 1%;">
1%
</div>
</div>
<br />
<script>
function move() {
var elem = document.getElementById("myBar");
clearInterval(window.i);//点击开始先清除上一次的计时器，防止叠加
window.i = setInterval(frame, 200);
function frame() {
var width=parseInt(elem.style.width) ||0;
if (width == 100) {
clearInterval(i);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width + "%"
}
}
}
</script>
<div style="text-align: center;">
<button onclick="move()" id="bt">
开始
</button>
<br />
<button onclick="clearInterval(i);" id="bt">
暂停
</button>
</div>
</body>
</html>