如何使用JS实现4个进度条同时运行且无重复代码

最终优化方案 #

一、HTML修改说明

你原有代码存在重复id的问题（多个元素用同一个id="number"、同一个渐变id），不符合DOM规范，需要做两处调整：

1. 所有进度条内的<div id="number">改为<div class="number">
2. 每个svg内部的渐变id依次改为GradientColor1、GradientColor2、GradientColor3、GradientColor4，对应<circle>标签的stroke属性同步改为url(#GradientColor1)以此类推。

二、CSS调整

替换原有CSS中两处规则即可：

/* 把原来的#number替换为.number */
.number {
    font-weight: 600;
    color: #2E2D2E;
}
/* 删掉原来circle规则里的animation属性，删掉整个@keyframes anim规则 */
circle {
    fill: none;
    stroke: url(#GradientColor);
    stroke-width: 5px;
    stroke-dasharray: 478;
    stroke-dashoffset: 478;
}

三、JS优化代码（无重复逻辑，支持自定义每个进度条的数值）

// 数组内数值对应4个进度条的最终百分比，可自行修改调整
const targetPercentList = [65, 80, 75, 92]
// 圆环总长度，和CSS中stroke-dasharray的值保持一致即可
const circleTotalLength = 478

// 遍历所有进度条，复用同一套逻辑
document.querySelectorAll('.bar').forEach((bar, index) => {
    const numberEle = bar.querySelector('.number')
    const circleEle = bar.querySelector('circle')
    const currentTarget = targetPercentList[index]
    let counter = 0

    const timer = setInterval(() => {
        if (counter === currentTarget) {
            clearInterval(timer)
            return
        }
        counter += 1
        // 更新百分比文本
        numberEle.innerText = `${counter}%`
        // 动态更新圆环进度
        circleEle.style.strokeDashoffset = circleTotalLength * (1 - counter / 100)
    }, 28)
})

调整完成后4个进度条会同时加载，后续要修改进度值只需要改targetPercentList数组内的数值即可，不需要新增重复代码。

内容的提问来源于stack exchange，提问作者rusLaN L.