实现点击按钮，滚动条走动和百分比走动
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
#btn{
width: 100px;
height: 40px;
background-color: lightblue;
font-size: 25px;
border-radius: 10px;
float: left;
}
#divm{
width: 500px;
height: 40px;
float: left;
text-align: center;
font-size: 35px;
color: gold;
}
#rate{
position: absolute;
left: 350px;
top: 8px;
}
.divs{
width: 5px;
height: 40px;
/*background-color: blue;*/
float: left;
}
</style>
</head>
<body>
<button id="btn" onclick="loadd()">开始</button>
<p id="rate"></p>
<div id="divm">
<script>
for(var i = 0; i < 100; i++){
document.write("<div id=")
document.write(i)
document.write(" class='divs'></div>")
}
var odivs = document.getElementsByClassName('divs')
var count = 0
var rate = document.getElementById('rate')
function loadd(){
var timer = setInterval(function (){
odivs[count].style.backgroundColor='blue'
count++
if (count >= 100){
clearInterval(timer)
}
rate.innerHTML = count + '%'
}, 250)
}
</script>
</div>
</body>
</html>
网友评论