编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="bt1">开始</button>
<button id="bt2"> 停止</button>
<div>
当前进度：<span id="sp1"> 10%</span>
<progress id="pr1" max="100" min="0" value="10"></progress>
</div>
<script>
window.onload=function(){
document.getElementById("sp1").innerText="0%";
document.getElementById("pr1").value="0";
let time=null;
document.getElementById("bt1").onclick=function(){
if(time!=null) return;
time=setInterval(function(){
let i=parseInt(document.getElementById("pr1").value);
if(i==100 && time!=null)
{
clearInterval(time);
return;
}
i++;
document.getElementById("pr1").value=i;
document.getElementById("sp1").innerHTML=i.toString()+"%";
},1000)
};
document.getElementById("bt2").onclick=function(){
clearInterval(time);
time=null;
// return;
};
};
</script>
</body>
</html>
运行结果
