【发布时间】：2022-06-15 21:52:15
【问题描述】：
我在具有 id 技能的部分中有一个循环进度条。
在滚动时，当我到达本节时，下面的代码会增加圆圈开始的百分比和颜色。
这部分代码工作得很好。
但我想要的是当我从这个部分向上或向下移动到另一个部分时，我希望百分比再次为 0%，圆圈为空白，没有任何颜色，当我再次到达时，此动画再次发生。
我很累，就像在滚动的 if else 语句中一样，但我无法做到这一点
我该如何解决？
const numbers = document.querySelectorAll(".number"); // get the divs
const svgEl = document.querySelectorAll('svg circle');
const section = document.querySelector('#skills');
const counters = Array(numbers.length); // Create a counter for each div
const intervals = Array(numbers.length); // Create an intervals for each div
counters.fill(0); //Add the Value 0 for each counter
window.onscroll = function () {
if (window.scrollY >= section.offsetTop - 50) {
numbers.forEach((number, index) => { //Looping on each div
intervals[index] = setInterval(() => {
if (counters[index] === parseInt(number.dataset.num)) { //check if the counter equal to data attribut
clearInterval(intervals[index]);
} else { //not equal add 1 to counter
counters[index] += 1;
number.innerHTML = counters[index] + "%";
svgEl[index].style.strokeDashoffset = Math.floor(472 - 440 * parseFloat(number.dataset.num / 100));
}
}, 20);
});
} else {
numbers.forEach((number, i) => {
intervals[i] = setInterval(() => {
if(counters[i] === parseInt(number.dataset.num)){
counters[i] --;
number.innerHTML = counters[i] + "%";
svgEl[index].style.strokeDashoffset = 472;
}
}, 20);
});
}
}.skills-container {
display: flex;
}
.skills .skills-container .skill-card {
margin-bottom: 25px;
}
.skills .skills-container .skill-card img {
height: 200px;
/*filter: brightness(70%) contrast(150%) saturate(0%) brightness(150%);*/
}
.skills .skills-container .skill-card .skill-level {
top: 70px;
left: 50%;
}
.skills .skills-container .skill-card .skill-level .outer {
height: 160px;
width: 160px;
border-radius: 50%;
padding: 20px;
box-shadow: 6px 6px 10px -1px rgba(0 0 0 /.15), -6px -6px 10px -1px rgba(255 255 255 / .7);
}
.skills .skills-container .skill-card .skill-level .outer .inner {
height: 120px;
width: 120px;
border-radius: 50%;
box-shadow: inset 4px 4px 6px -1px rgba(0 0 0/ .2),
inset -4px -4px 6px -1px rgba(255 255 255 /.7),
-.5px -.5px 0px rgba(255 255 255 / 1),
.5px .5px 0px rgba(0 0 0 /.15),
0px 12px 10px -10px rgba(0 0 0 / 0.05);
}
.skills .skills-container .skill-card .skill-level .outer .inner .number {
font-weight: 500;
}
circle {
fill: none;
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset: 472;
transition: 2s linear;
}
svg {
position: absolute;
top: 0;
left: 0;
}
.skills .skills-container .skill-card:nth-child(1) .skill-level .outer .inner .number {
color: var(--mainColor);
}
.skills .skills-container .skill-card:nth-child(1) .skill-level circle {
stroke: var(--mainColor);
}
.skills .skills-container .skill-card:nth-child(2) .skill-level .outer .inner .number {
color: #4fa0ff;
}
.skills .skills-container .skill-card:nth-child(2) .skill-level circle {
stroke: #4fa0ff;
}
.skills .skills-container .skill-card:nth-child(3) .skill-level .outer .inner .number {
color: #ffed4f;
}
.skills .skills-container .skill-card:nth-child(3) .skill-level circle {
stroke: #ffed4f;
}
.skills .skills-container .skill-card:nth-child(4) .skill-level .outer .inner .number {
color: #7811f7;
}
.skills .skills-container .skill-card:nth-child(4) .skill-level circle {
stroke: #7811f7;
}
.skills .skills-container .skill-card h2 {
font-size: 25px;
font-weight: 500;
margin: 30px 0 20px;
color: var(--mainColor);
}
.skills .skills-container .skill-card p {
color: var(--secoundColor);
line-height: 28px;
max-width: 250px;
margin: auto;
}
.one,
.two {
height: 100vh;
} <section class="one"></section>
<section class="skills position-relative" id="skills">
<div class="container">
<h1 class="text-center heading text-capitalize">my skills</h1>
<div class="row skills-container justify-content-between">
<div class="skill-card col-md-6 col-lg-4 position-relative">
<img src="img/html5.jpg" alt="html" class="d-block m-auto position-relative">
<div class="skill-level position-absolute">
<div class="outer">
<div class="inner d-flex align-items-center justify-content-center">
<div class="number" data-num="95">
</div>
</div>
</div>
</div>
<h2 class="text-uppercase text-center">html</h2>
</div>
<div class="skill-card col-md-6 col-lg-4 position-relative">
<img src="img/css.png" alt="" class="d-block m-auto position-relative">
<div class="skill-level position-absolute">
<div class="outer">
<div class="inner d-flex align-items-center justify-content-center">
<div class="number" data-num="90">
</div>
</div>
</div>
</div>
<h2 class="text-uppercase text-center">css</h2>
</div>
<div class="skill-card col-md-6 col-lg-4 position-relative">
<img src="img/js.png" alt="" class="d-block m-auto position-relative">
<div class="skill-level position-absolute">
<div class="outer">
<div class="inner d-flex align-items-center justify-content-center">
<div class="number" data-num="85">
</div>
</div>
</div>
</div>
<h2 class="text-uppercase text-center">js</h2>
</div>
<div class="skill-card col-md-6 col-lg-4 position-relative">
<img src="img/bootstrap-logo.png" alt="" class="d-block m-auto position-relative">
<div class="skill-level position-absolute">
<div class="outer">
<div class="inner d-flex align-items-center justify-content-center">
<div class="number" data-num="90">
</div>
</div>
</div>
</div>
<h2 class="text-uppercase text-center">bootstrap</h2>
</div>
</div>
</div>
</section>
<section class="two"></section>【问题讨论】：
-
@Unmitigated 代码已更新
标签： javascript html css