<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is test</title>
<style>
#main{
width: 100%;
height: 30px;
background: aliceblue;
}
#progress{
width: 30px;
height: 28px;
margin-top: 1px;
background: darkgreen;
}
</style>
</head>
<body>
<div id="main">
<div id="progress">
</div>
</div>
<button id="start">开始</button>
</body>
<script>
start.onclick = function () {
pro = 0;
v = 1
obj = setInterval(function () {
pro+=v;
if (pro>50) {
v = 10;
}
if (pro>100){
clearInterval(obj);
}
progress.style.width = pro+'%';
},100)
}
</script>
</html>
JS-进度条的实现(只是一个页面效果)
最新推荐文章于 2023-11-09 11:24:12 发布