我可以在多个 Div 上使用相同的 JavaScript 函数吗？

Question

我是 javascript 的新手，我需要用动画条显示百分比的圆圈进度
幸运的是我已经做到了，但问题是我想用不同的百分比制作 5 个或更多相同的圆圈并且 **我需要从页面加载开始而不是通过单击 ** 那么如何在多个 div 上调用该函数使圆圈同时以不同的百分比出现

这是我的 JS 代码

 let firstLayer = document.querySelector('.cardHolder'), secondLayer = document.querySelector('.skillSecond'), startValue = 0, endValue = 50, duration = 20; let progress = setInterval(() => { startValue++ secondLayer.textContent = `${startValue}%` firstLayer.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)` if (startValue == endValue) { clearInterval(progress) } }, duration);

 .cardHolder { display: flex; justify-content: center; align-items: center; background: conic-gradient(rgb(15, 176, 6) 3.6deg, rgb(193, 193, 193) 0deg); width: 100px; height: 100px; border-radius: 100%; }.skillFirst { display: flex; justify-content: center; align-items: center; background-color: #90697a; width: 80%; height: 80%; border-radius: 100%; }.skillSecond { font-family: 'Montserrat Subrayada', sans-serif; font-size: 24px; }

 <div class="cardHolder"> <div class="skillFirst"> <div class="skillSecond"> <span class="skillContent"></span> </div> </div> </div>

Answer 1

这就是我想出的。 基本上它的工作原理是制作一个包含每个单独进度条规范的对象数组。 然后遍历规范并开始每个间隔。

 let progression = [ { progressBarId: "first", progressBarLabelId: "first_label", startValue: 0, endValue: 50, duration: 20 }, { progressBarId: "second", progressBarLabelId: "second_label", startValue: 10, endValue: 100, duration: 10 }, { progressBarId: "third", progressBarLabelId: "third_label", startValue: 50, endValue: 80, duration: 20 } ]; window.onload = function() { for(var i = 0; i < progression.length; i++) { let firstLayer = document.getElementById(progression[i].progressBarId), secondLayer = document.getElementById(progression[i].progressBarLabelId), startValue = progression[i].startValue, endValue = progression[i].endValue, duration = progression[i].duration; let progress = setInterval(() => { startValue++ secondLayer.textContent = `${startValue}%` firstLayer.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)` if (startValue == endValue) { clearInterval(progress) } }, duration); } }

 .cardHolder { display: flex; justify-content: center; align-items: center; background: conic-gradient(rgb(15, 176, 6) 3.6deg, rgb(193, 193, 193) 0deg); width: 100px; height: 100px; border-radius: 100%; }.skillFirst { display: flex; justify-content: center; align-items: center; background-color: #90697a; width: 80%; height: 80%; border-radius: 100%; }.skillSecond { font-family: 'Montserrat Subrayada', sans-serif; font-size: 24px; }

 <div class="cardHolder" id="first"> <div class="skillFirst"> <div class="skillSecond" id="first_label"> <span class="skillContent" ></span> </div> </div> </div> <div class="cardHolder" id="second"> <div class="skillFirst"> <div class="skillSecond" id="second_label"> <span class="skillContent" ></span> </div> </div> </div> <div class="cardHolder" id="third"> <div class="skillFirst"> <div class="skillSecond" id="third_label"> <span class="skillContent" ></span> </div> </div> </div>

希望这对您有所帮助，如果没有，请发表评论！