我可以在多個 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>

希望這對您有所幫助，如果沒有，請發表評論！