js手动输入实现进度条
时间: 2023-12-09 12:03:24 浏览: 59
可以通过 HTML、CSS 和 JavaScript 实现进度条。以下是一个简单的例子:
HTML 代码:
```
<div class="progress-bar">
<div class="progress"></div>
</div>
```
CSS 代码:
```
.progress-bar {
width: 200px;
height: 20px;
border: 1px solid black;
position: relative;
}
.progress {
height: 100%;
background-color: green;
position: absolute;
left: 0;
top: 0;
width: 0%;
}
```
JavaScript 代码:
```
// 获取进度条元素和进度元素
const progressBar = document.querySelector('.progress-bar');
const progress = document.querySelector('.progress');
// 设置初始进度为 0%
let currentProgress = 0;
// 定义更新进度的函数
function updateProgress() {
// 增加进度
currentProgress += 10;
// 将进度更新到进度元素中
progress.style.width = `${currentProgress}%`;
}
// 每隔 1 秒钟更新进度
setInterval(updateProgress, 1000);
```
以上代码将会每隔 1 秒钟将进度条宽度增加 10%,最终呈现出进度条的效果。
阅读全文