JavaScript - Progress Bar - несколько тестов и процент в одной строке для индикатора выполнения - PullRequest
Новая
       115

JavaScript - Progress Bar - несколько тестов и процент в одной строке для индикатора выполнения

0 голосов
/ 21 июня 2020

У меня есть индикатор выполнения CSS, который вызывает строку, полученную из теста VoIP на основе его прогресса, для изменения ширины полосы. У меня также есть <input type='number'>, который функция JS вызывает для запуска теста x количество раз.

проблема, с которой я сталкиваюсь, заключается в том, что индикатор выполнения измеряет только ПЕРВЫЙ тест останавливается на 90%, затем Остальное применяет после завершения тестов.

то, что я пытаюсь получить, - это индикатор выполнения, который покажет ход всего процесса. например, если я запускаю 4 теста, то к концу первого теста индикатор выполнения покажет 25%.

Я не могу предоставить тест, который включает строку выполнения. Вот мой синтаксис, пожалуйста, укажите, есть ли у меня какие-либо дыры, которые я забыл опубликовать: 

//animation for progress bar
function progress(pRess) { //used in line 22 value
  var pRessBar = document.getElementById('prBar');
   document.getElementById('canvascon').style.display = 'none';
  document.getElementById('clickerTest').innerHTML = '<div class="testLoad" id="testLoad"><h1>Loading...</h1><p>Please wait for the test to finish</p></div>';
  document.getElementById('prBar').style.display = 'flex';
  pRessBar.style.setProperty('--pwidth', `${pRess}%`);
  pRessBar.dataset.label = pRess + ' %';
}
#prBar {
  display: none;
  position: relative;
  width: 500px;
  height: 2em;
  background-color: #111;
  margin: auto;
    margin-top: 145px;
  margin-bottom: 1em;
  border-radius: 1.5em;
  border: .5em solid #111;
  overflow: hidden;
}
#prBar::before {
  position: absolute;
  left: calc(-100% + var(--pwidth));
  content: '';
  width: 100%;
  height: 2em;
  background-color: #069;
  border-radius: 1.5em;
}
#prBar::after {
  content: attr(data-label);
  position: absolute;
  left: 227px;
  height: 2em;
  top: .5em;
  color: white
}
<div class="preT" id="preT">
      <form methed="post">
        <label for="voipLines">VoIP Lines</label>
        <input type="number" class="voiplines" id="voipLines" name="voipLines" min="1" max="1000" value="1">
        <button class="vButton" id="vButton" type="submit" onclick="testfun()">Begin Test</button>
      </form>
    </div>
...