前端画一个进度条,数字在进度条中间
时间: 2024-04-30 13:25:08 浏览: 14
可以使用 HTML、CSS 和 JavaScript 来实现一个进度条,并在其中间显示数字。下面是一个简单的实现方式:
HTML 代码:
```html
<div class="progress">
<div class="progress-bar"></div>
<div class="progress-text"></div>
</div>
```
CSS 代码:
```css
.progress {
width: 80%;
height: 20px;
border-radius: 10px;
background-color: #ddd;
position: relative;
}
.progress-bar {
width: 0%;
height: 100%;
border-radius: 10px;
background-color: #007bff;
transition: width 0.5s ease-in-out;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
color: #fff;
}
```
JavaScript 代码:
```javascript
const progress = document.querySelector('.progress');
const progressBar = progress.querySelector('.progress-bar');
const progressText = progress.querySelector('.progress-text');
let percent = 0;
// 模拟进度变化
const simulateProgress = setInterval(() => {
percent++;
if (percent > 100) {
clearInterval(simulateProgress);
} else {
progressBar.style.width = `${percent}%`;
progressText.textContent = `${percent}%`;
}
}, 50);
```
这段代码会在页面中生成一个进度条,并且通过 JavaScript 模拟进度变化。进度条的宽度和数字会自动更新,直到进度条填满。