ProgressBar на чистом JavaScript

375

23 июня 2017, 10:30

Задача: При загрузке страницы плавное увеличение прогрессбара до нужного значения + вывод этого значения в процентах. Смог сделать для одного елемента, а на странице таких нужно 4 или более. https://codepen.io/Slava91/pen/PjpGGr . Заранее спасибо за помощь.

<ul>
  <li>
    <p>User Strategy+Engineering</p>
    <div class="myProgress">
      <div class="myBar"></div>
    </div>
    <p class="max-value" data-max='88'>0</p>
  </li>
  <li>
    <p>HTML</p>
    <div class="myProgress">
      <div class="myBar"></div>
    </div>
    <p class="max-value" data-max='75'>0</p>
  </li>
  <li>
    <p>User Experience Design</p>
    <div class="myProgress">
      <div class="myBar"></div>
    </div>
    <p class="max-value" data-max='42'>0</p>
  </li>
  <li>
    <p>User Experience Design</p>
    <div class="myProgress">
      <div class="myBar"></div>
    </div>
    <p class="max-value" data-max='55'>0</p>
  </li>
</ul>
window.onload = function move() {
    var elem = document.getElementsByClassName("myBar");
    for(var i = 0; i<elem.length; i++){
      var maxValue = document.getElementsByClassName('max-value'); 
      var width = 1;
      var id = setInterval(frame, 5);
      function frame() {
          if (width >= maxValue.dataset.max) {
              clearInterval(id);
          } else {
              width++;
              i.style.backgroundColor = 'blue';
              i.style.width = width + '%';
              maxValue.innerHTML = width + '%';
          }
      }
    }

}

Answer 1

Завернем все значения меняющихся в цикле переменных в объект и передадим этот объект в setInterval для использования в качества параметра функции frame.

var width = 1;
var elem = document.getElementsByClassName("myBar");
var maxValue = document.getElementsByClassName('max-value'); 
for(var i = 0; i < elem.length; i++) {
  var params = {
    elem: elem[i],
    maxElem: maxValue[i],
    width: width,
    interval: null
  };
  params.interval = setInterval(frame, 50, params);
}
function frame(aParams) {
  if (aParams.width >= aParams.maxElem.dataset.max) {
    clearInterval(aParams.interval);
  } else {
    aParams.width++;
    aParams.elem.style.backgroundColor = 'blue';
    aParams.elem.style.width = aParams.width + '%';
    aParams.maxElem.innerHTML = aParams.width + '%';
  }
}