<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
header{
width: 1000px;
top: 50px;
border: 1px solid #000;
margin: 0 auto;
}
div{
width: 1%;
height: 50px;
line-height: 50px;
background:#0ff;
font-size: 30px;
text-align: right;
}
</style>
<script>
//使用定時器實現進度條效果
window.onload = function(){
var color = document.getElementById("color") ;
var i = 1;
setInterval(function(){
i++;
color.style.width=i+"%";
color.innerHTML = i+"%";
if(i>=100){
i=1;
}
},50)
}
</script>
</head>
<body>
<header>
<div id="color"></div>
</header>
</body>
</html>
第二版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day08_作業講解</title>
<style>
#progress{
height: 10px;
padding: 2px;
border: 1px solid #000;
position: relative;
}
#progress div {
width: 1%;
height: 10px;
background-color:#f00;
}
#progress span{
position: absolute;
left: 50%;
top: 0;
}
</style>
<script>
//頁面加載時間
window.onload =function(){
//使用定時器做進度條
//H5寫法
/*var progressBar =document.getElementById("progressBar");
var percent =document.getElementById("percent");
var val = 0;
var timer = setInterval(function(){
val++;
if(val>=100){
clearInterval(timer);
val = 100;
}
progressBar.value = val;
percent.innerHTML = val +'%';
},100)*/
//普通做法
var bar =document.getElementById("bar");
var percent =document.getElementById("percent");
var val = 0;
var timer = setInterval(function(){
val++;
if(val>=100){
clearInterval(timer);
val = 100;
}
bar.style.width = val +'%';
percent.innerHTML = val +'%';
},50)
}
</script>
</head>
<body>
<h1>進度條效果</h1>
<!--<progress value ="10" max='100' id='progressBar'></progress><span id="percent">1%</span>-->
<div id="progress">
<div id="bar"></div>
<span id="percent">0%</span>
</div>
</body>
</html>