正文
JavaScript 进度条重复加载
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE HTML>
<html>
<head>
<meta charset ="utf-8">
<title>JavaScript 百分比进度条</title>
<style>
#container{
width:100%;
height:30px;
border:1px solid lightgrey;
margin:40px
}
#bar{
height:30px;
background:green;
width:1%;
} </style>
</head> <body>
<div id="container">
<div id="bar">
<div id="mybar"> </div>
</div>
</div>
<button onclick="start()">
点击
</button>
<script>
function start(){
var mybar=document.getElementById("bar");
var width=1;
var time=setInterval(move,100);
function move(){
if(width >= 100){
width=1;
}else{
width++;
mybar.style.width=width+"%";
mybar.innerHTML=width*1+"%";
}
}
}
</script>
</body>
</html>
