【发布时间】：2020-03-30 16:59:18
【问题描述】：
我正在尝试为每个进度条设置不同的颜色。我无法更改第二个栏的颜色，依此类推。我应该为 JavaScript 中的每个条创建一个类来注入颜色吗？如何为每个条加载不同颜色的相同动画？
您好，我正在尝试为每个进度条设置不同的颜色。我无法更改第二个栏的颜色，依此类推。我应该为 JavaScript 中的每个条创建一个类来注入颜色吗？如何为每个条加载不同颜色的相同动画？
HTML：
<div class="progressbar">
<h1 class="title">My Tools & Skills</h1>
<div class="skill-progress">
<h3>HTML5</h3>
<div class="progress">
<div class="progress-done" data-done="70">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="60">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="50">
</div>
</div>
<div class="progress">
<div class="progress-done" data-done="40">
</div>
</div>
</div>
</div>
CSS：
.progressbar h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.2em;
color: #666666;
margin: auto;
}
.skill-progress {
margin-bottom: 10px;
}
.progress {
background-color: #f2f2f2;
border-radius: 20px;
height: 25px;
width: 450px;
margin: 20px auto;
}
.progress-done {
background: linear-gradient(to right, #f83600 0%, #f9d423 100%);
box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423;
border-radius: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 0;
opacity: 0;
transition: 4s ease 0.3s;
}
JS：
const progresses = document.querySelectorAll('.progress-done');
progresses.forEach(progress => {
const done = progress.getAttribute('data-done');
const duration = getComputedStyle(progress).transitionDuration;
const timeoutDuration = +duration.slice(0, 1) * 1000;
progress.style.width = done + "%";
progress.style.opacity = 1;
for (let i = 0; i <= done; i++) {
setTimeout(() => {
progress.innerText = i + "%";
}, (timeoutDuration / done) * i);
}
});
【问题讨论】：
-
您希望条形图具有特定颜色，还是在 n 种颜色之间来回交替？
-
为什么不给每个进度条添加一个唯一的类，然后在 css 中定位它？
-
.progress-1 .progress-done { background: linear-gradient(to right, #f83600 0%, #f9d423 100%); box-shadow: 0 3px 3px -5px #f83600, 0 2px 5px #f9d423; }等 -
您可以保留相同的类，但应该能够为每个条添加一个 ID，然后只给 ID 一个背景色
标签： javascript css animation colors progress-bar