<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ProgressBar</title>
<style>
*{
margin: 0;
padding: 0;
}
#father{
100%;
height: 30px;
background: skyblue;
}
#son{
1%;
height: 28px;
margin-top: 1px;
background: rgba(1, 1, 1, 0.5)
}
</style>
</head>
<body>
<div id='father'>
<div id='son'></div>
</div>
<div><h3 id="text">0%</h3></div>
<input type="button" id='btn' value="点击开始" >
</body>
<script>
var obj;
var bar = document.getElementById('son')
function action(){
var iSpeed=1;
obj=setInterval(function(){
iSpeed+=1;
if(iSpeed>=100){ // 设置达到多少进度后停止
clearInterval(obj);
}
bar.style.width=iSpeed+'%';
document.getElementById('text').innerHTML=iSpeed+'%';
},100); // 1s后函数执行一次
}
var btn = document.querySelector('#btn');
btn.onclick = function() {
bar.style.width=0 + '%';
clearInterval(obj);
action();
};
</script>
</html>
使用效果
