用css+js画一个进度条
时间: 2023-08-04 07:33:30 浏览: 56
好的,以下是一个基于CSS和JavaScript实现的简单进度条示例:
HTML代码:
```html
<div class="progress-bar">
<div class="progress"></div>
</div>
```
CSS代码:
```css
.progress-bar {
width: 300px;
height: 10px;
background-color: #ddd;
border-radius: 5px;
}
.progress {
width: 0%;
height: 100%;
background-color: #3498db;
border-radius: 5px;
}
```
JavaScript代码:
```javascript
const progressBar = document.querySelector('.progress');
function updateProgress(progress) {
progressBar.style.width = progress + '%';
}
// 示例:每秒钟增加10%的进度
let currentProgress = 0;
setInterval(() => {
currentProgress += 10;
if (currentProgress > 100) {
currentProgress = 100;
}
updateProgress(currentProgress);
}, 1000);
```
这段代码创建了一个宽度为300像素、高度为10像素的灰色进度条,并且在进度条内部创建了一个绿色的进度块。`updateProgress`函数用于更新进度块的宽度,并且可以根据需要传入当前进度的百分比。最后的JavaScript代码演示了如何使用`setInterval`函数定时更新进度条的进度,这里是每秒钟增加10%。