4由JS管理的进度条

Question

我需要使4条同时工作，没有重复的JS代码。也许使用foreach或其他什么，带索引。其实我不是pro js用户，所以我不能自己改进它(

​

// Progress bar 
let number = document.getElementById('number');
let counter = 0;
setInterval(() => {
    if(counter == 65) {
        clearInterval();
    } else {
        counter += 1;
        number.innerHTML = counter + "%";
    }
   
}, 28);

// progress bar
.bar {
    width: 110px;
    height: 110px;
    position: relative;
    transform: scale(0.8);
}
.bar:not(:last-child) {
    margin-right: 50px;
}
.bar__text {
    text-align: center;
    font-size: 14px;
    line-height: 19px;
    color: #2E2D2E;
    margin-top: 5px;
}
.outer {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
                -6px -6px 10px -1px rgba(255,255,255,0.7);
}
.inner  {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,.2),
    inset 4px 4px 6px -1px rgba(255,255,255,0.7),
    -0.5px -0.5px 0px rgba(255,255,255,1),
    0.5px 0.5px 0px rgba(0,0,0,.15),
    0px 12px 10px -10px rgba(0,0,0,.05);
    position: absolute;
    inset: 0;
    margin: auto;
}
#number {
    font-weight: 600;
    color: #2E2D2E;
}
.bar svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
circle {
    fill: none;
    stroke: url(#GradientColor);
    stroke-width: 5px;
    stroke-dasharray: 478;
    stroke-dashoffset: 478;
    animation: anim 2s linear forwards;
}
@keyframes anim {
    100% {
        stroke-dashoffset: 250;
    }
}

 <div class="progress__bars bars">
            <div class="bar">
                <div class="outer">
                    <div class="inner">
                        <div id="number">
                                
                        </div>
                    </div>
                </div>
            
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
                    <defs>
                        <linearGradient id="GradientColor">
                            <stop offset="0%" stop-color="#e91e63" />
                            <stop offset="100%" stop-color="#673ab7" />
                        </linearGradient>
                    </defs>
                    <circle cx="52" cy="52" r="45" stroke-linecap="round" />
                </svg>
                <div class="bar__text">
                    Today's Visitors
                </div>
            </div>
            <div class="bar">
                <div class="outer">
                    <div class="inner">
                        <div id="number">
                                
                        </div>
                    </div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
                    <defs>
                        <linearGradient id="GradientColor">
                            <stop offset="0%" stop-color="#e91e63" />
                            <stop offset="100%" stop-color="#673ab7" />
                        </linearGradient>
                    </defs>
                    <circle cx="52" cy="52" r="45" stroke-linecap="round" />
                </svg>
                <div class="bar__text">
                    Total Visitors
                </div>
            </div>
            <div class="bar">
                <div class="outer">
                    <div class="inner">
                        <div id="number">
                                
                        </div>
                    </div>
                </div>
            
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
                    <defs>
                        <linearGradient id="GradientColor">
                            <stop offset="0%" stop-color="#e91e63" />
                            <stop offset="100%" stop-color="#673ab7" />
                        </linearGradient>
                    </defs>
                    <circle cx="52" cy="52" r="45" stroke-linecap="round" />
                </svg>
                <div class="bar__text">
                    Today's Hits
                </div>
            </div>
            <div class="bar">
                <div class="outer">
                    <div class="inner">
                        <div id="number">
                                
                        </div>
                    </div>
                </div>
            
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
                    <defs>
                        <linearGradient id="GradientColor">
                            <stop offset="0%" stop-color="#e91e63" />
                            <stop offset="100%" stop-color="#673ab7" />
                        </linearGradient>
                    </defs>
                    <circle cx="52" cy="52" r="45" stroke-linecap="round" />
                </svg>
                <div class="bar__text">
                    Total Hits
                </div>
            </div>
        </div>

​

添加代码段。有一些文物，但这是可以的。仍然在代码片段中工作啊，一些描述需求是如此无聊的XD

Answer 1

给每个bar元素一个类名和唯一的id，然后访问这个类，简单地循环遍历所有的类，设置值，并对它们应用条件。

​

//get all the class
    let item = document.querySelectorAll('.number');
    let counter = 0;

    for(var i=0; i < item.length; i++)
    {
      //set progress bar for each individual id property
      var classId = item[i].id;
      let number = document.getElementById(classId);
      setInterval(() => {
          if(counter == 65) {
              clearInterval();
          } else {
            debugger;
              counter += 1;
              number.innerHTML = counter + "%";
          }
        
      }, 28);
    }

  <div class="progress__bars bars">
    <div class="bar">
        <div class="outer">
            <div class="inner">
                <div class="number" id="number1">
                        
                </div>
            </div>
        </div>
    
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
            <defs>
                <linearGradient id="GradientColor">
                    <stop offset="0%" stop-color="#e91e63" />
                    <stop offset="100%" stop-color="#673ab7" />
                </linearGradient>
            </defs>
            <circle cx="52" cy="52" r="45" stroke-linecap="round" />
        </svg>
        <div class="bar__text">
            Today's Visitors
        </div>
    </div>
    <div class="bar">
        <div class="outer">
            <div class="inner">
                <div class="number" id="number2">
                        
                </div>
            </div>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
            <defs>
                <linearGradient id="GradientColor">
                    <stop offset="0%" stop-color="#e91e63" />
                    <stop offset="100%" stop-color="#673ab7" />
                </linearGradient>
            </defs>
            <circle cx="52" cy="52" r="45" stroke-linecap="round" />
        </svg>
        <div class="bar__text">
            Total Visitors
        </div>
    </div>
    <div class="bar">
        <div class="outer">
            <div class="inner">
                <div class="number" id="number3">
                        
                </div>
            </div>
        </div>
    
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
            <defs>
                <linearGradient id="GradientColor">
                    <stop offset="0%" stop-color="#e91e63" />
                    <stop offset="100%" stop-color="#673ab7" />
                </linearGradient>
            </defs>
            <circle cx="52" cy="52" r="45" stroke-linecap="round" />
        </svg>
        <div class="bar__text">
            Today's Hits
        </div>
    </div>
    <div class="bar">
        <div class="outer">
            <div class="inner">
                <div class="number" id="number4">
                        
                </div>
            </div>
        </div>
    
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px">
            <defs>
                <linearGradient id="GradientColor">
                    <stop offset="0%" stop-color="#e91e63" />
                    <stop offset="100%" stop-color="#673ab7" />
                </linearGradient>
            </defs>
            <circle cx="52" cy="52" r="45" stroke-linecap="round" />
        </svg>
        <div class="bar__text">
            Total Hits
        </div>
    </div>
</div>
</div>

​

Answer 2

在这里，我制作了一个可重用的进度指示器，它的工作方式类似于react钩子。

更新了它，所以它使用元素，而不是你使用的SVG。

​

const bar1 = document.getElementById('bar1');
const bar2 = document.getElementById('bar2');
const bar3 = document.getElementById('bar3');
const bar4 = document.getElementById('bar4');

function progressBar(target, value = 0) {
  const progress = document.createElement("progress");
  progress.max = 100;
  progress.value = 0;
  target.appendChild(progress)
  return [
    () => value,
    (add) => {
      value += add;
      if (value >= 100) {
        progress.value = 100;
        return;
      }
      progress.value = value;
    },
  ];
}

const [progress1, addProgress1] = progressBar(bar1);
const [progress2, addProgress2] = progressBar(bar2);
const [progress3, addProgress3] = progressBar(bar3);
const [progress4, addProgress4] = progressBar(bar4);

setInterval(() => addProgress1(Math.ceil(Math.random() * 10)), 100)
setInterval(() => addProgress2(Math.ceil(Math.random() * 10)), 200)
setInterval(() => addProgress3(Math.ceil(Math.random() * 10)), 150)
setInterval(() => addProgress4(Math.ceil(Math.random() * 10)), 50)

<div class="bar">
  <div class="outer">
    <div class="inner">
      <div id="bar1" />
      <div id="bar2" />
      <div id="bar3" />
      <div id="bar4" />
    </div>
  </div>
  <div class="bar__text">
    Today's Visitors
  </div>
</div>

​