使用js写一个里程碑进度条,里程碑的每一段不相等,代码是怎么样的
时间: 2023-03-27 16:05:14 浏览: 140
你好,以下是使用 JavaScript 编写里程碑进度条的代码示例:
HTML 代码:
```
<div class="progress-bar">
<div class="milestone" style="width: 20%;"></div>
<div class="milestone" style="width: 40%;"></div>
<div class="milestone" style="width: 60%;"></div>
<div class="milestone" style="width: 80%;"></div>
<div class="milestone" style="width: 100%;"></div>
</div>
```
CSS 代码:
```
.progress-bar {
width: 100%;
height: 20px;
background-color: #ddd;
position: relative;
}
.milestone {
height: 100%;
position: absolute;
top: ;
background-color: #007bff;
}
```
JavaScript 代码:
```
const milestones = [20, 40, 60, 80, 100];
const progressBar = document.querySelector('.progress-bar');
milestones.forEach((milestone) => {
const milestoneElement = document.createElement('div');
milestoneElement.classList.add('milestone');
milestoneElement.style.width = `${milestone}%`;
progressBar.appendChild(milestoneElement);
});
```
以上代码会生成一个进度条,里程碑的每一段长度不相等,可以根据需要修改里程碑的长度和样式。希望能对你有所帮助。