用JS写一个实时的百分比进度条
时间: 2024-05-19 21:16:04 浏览: 15
<!DOCTYPE html>
<html>
<head>
<title>实时百分比进度条</title>
<style>
#progressBar {
width: 100%;
height: 20px;
border: 1px solid #000;
position: relative;
}
#progressBar div {
height: 100%;
background-color: #337ab7;
position: absolute;
left: 0;
top: 0;
width: 0%;
text-align: center;
color: #fff;
font-weight: bold;
line-height: 20px;
}
</style>
</head>
<body>
<div id="progressBar">
<div></div>
</div>
<script>
var progressBar = document.getElementById("progressBar").querySelector("div");
var percent = 0;
var interval = setInterval(function() {
if (percent < 100) {
percent += 1;
progressBar.style.width = percent + "%";
progressBar.innerHTML = percent + "%";
} else {
clearInterval(interval);
}
}, 50);
</script>
</body>
</html>
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)