代码来自老师上课时的讲解,所以无法填资源链接
我老师的博客:https://me.csdn.net/dongfuguo
效果展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态进度条</title>
</head>
<body>
<label id="number" for="prog"></label>
<progress id="prog" value="60" max="100"></progress>
<input type="button" value="start" onclick="start()"/>
<input type="button" value="stop" onclick="stop()"/>
<script type="text/javascript">
function start(){
value = parseInt(document.getElementById('prog').value);
if(value >= 100){value=0;}
document.getElementById('prog').value = (value+1).toString();
document.getElementById('number').innerHTML = value.toString();
t = setTimeout('start()',100);
}
function stop(){
try{
clearTimeout(t);
}
catch(t){
for(var i = 0; i <= 100; i++){
document.getElementById('number').innerHTML = i.toString();
document.getElementById('prog').value = i.toString();
}
}
}
</script>
</body>
</html>