JavaScript CSS Индикатор выполнения теста VoIP - PullRequest
Новая
       58

JavaScript CSS Индикатор выполнения теста VoIP

2 голосов
/ 29 мая 2020

У меня в основном два div, один абсолютно над другим. У меня также есть переменная из приложения, которая представляет процент завершения теста VoIP. Теперь мне нужно, чтобы индикатор выполнения вызывал переменную процента, используя JavaScript.

. Мне сказали, что мне нужно асинхронно обновить индикатор выполнения, но я не знаю, как это сделать. Я знаю, что есть много способов сделать это. Я все еще изучаю JavaScript, и мне нужен пример для работы. Я пробовал ряд из того, что, как я полагаю, сработает, но то, что я публикую здесь, - это всего лишь последняя попытка. используя setInterval(), потому что мне нужна ширина, основанная на переменной. Я провел тестовый запуск одним нажатием кнопки и почувствовал, что его нет необходимости включать. 

//Variable for the test's percent. it provides just a number in increments of 5

<param name="js-prog" value="progress($PROGRESS$)">\

 function progress(pRess) {
      const pRessBar = document.getElementsByClassName('ressBar');
      const computedStyle = getComputedStyle(pRessBar);
      const styleWidth = parseFloat(computedStyle.getPropertyValue('pwidth')) || 0
      pRessBar.style.setproperty('pwidth', styleWidth + pRess)
}
.ressBar {
  position: relative;
  width: 500px;
  height: 3em;
  background-color: #111;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
  color: white;
}
.ressBar::before {
  content: attr(data-label);
  display: flex;
  align-items: center;
  position: absolute;
  left: .5em;
  top: .5em;
  bottom: .5em;
  width: calc(var(pwidth, 0) * 1%);
  min-width: .1rem;
  max-width: calc(100% - 1em);
  background-color: #069;
  border-radius: 15px;
  padding: 1em;
}
`<div class="ressBar" Id="ressBar" style="pwidth: .1" data-label="Loading..."></div>

1 Ответ

0 голосов
/ 30 мая 2020

css переменные всегда должны иметь двойное da sh в начале их имен. Лично я нахожу пример скрученным на YouTube, для того же результата я вижу такие вещи: 

const pRessBar = document.getElementById('ressBar') 

function setRessBar_percent(val) { // 0 <= val <= 100
  pRessBar.style.setProperty('--pwidth', `${val}%`)
  pRessBar.dataset.label = (val<100)? 'Loading...' : 'Loading completed ;-)'
}

/* test part */
inSiz.oninput=_=>
  {
  inSiz.nextSibling.textContent = `${inSiz.value}%`
  setRessBar_percent(inSiz.value) 
  }
#ressBar {
  box-sizing: border-box;
  position: relative;
  width: 500px;
  --pwidth: 50%;
  height: 3em;
  background-color: #111;
  margin: 1em auto;
  border-radius: 1.5em;
  color: white;
  border: .5em solid #111; ; /* try red color */
  overflow: hidden;
}
#ressBar::before {
  position: absolute;
  top: 0;
  left: calc( -100% + var(--pwidth) );
  content: '';
  width: 100%;
  height: 100%;
  background-color: #069;
  border-radius: 1em;
}
#ressBar::after {
  content: attr(data-label);
  position: absolute;
  left: 1em;
  top: 0;
  height: 2em;
  line-height: 2em;
}

/* test part */

#inSiz {
margin : 1em;
width: 200px;
}
<div Id="ressBar" data-label="Loading..."></div>

<!-- test part -->
<hr>
<p>play with this range : <p>
<input id="inSiz" type="range" value="50" min="0" max="100" step="1"><span>50%</span> (supposed value for the progress bar)
<p> to test the appearance of the progress bar<p>

позвольте мне выбрать ваш мозг и попытаться разобрать это на части.

no Проблема ami go;)

  1. double da sh имеет смысл, но я подумал, что JavaScript не любит тире или других определенных символов.

это просто в do c, а для javascript это не символ или что-то еще, а просто строка

Использование CSS настраиваемых свойств (переменных) == doc == или для == JS part ==

поэтому #ressBar :: before используется для ширины, которая изменяется, а #ressBar :: after - для текста «Загрузка ...»?

текст «Загрузка ... "находится в ::after, в то время как индикатор выполнения находится в ::before, поэтому он отображается ниже.

Объединение текста и индикатора выполнения - плохая идея: если прогресс равен нулю, то текст не может отображаться в пустом пространстве

есть ли причина, по которой вычисление «ширины» происходит под левым и правым?

в моем коде синяя полоса width: 100% его родителя. Он просто "перемещается" более или менее вправо в зависимости от запрошенного значения прогресса.

избыточная часть относится к left с отрицательным значением его родительского элемента (#ressBar { который, как правило, имеет css: overflow: hidden; два преимущества: 1- вы просто делаете размер, который хотите, на родительском элементе без каких-либо других css изменений 2- синяя полоса не имеет css проблем с border-radius: 1em;, когда ее размер меньше 1em

Я не понимаю, как работает часть JavaScript. Я понимаю pRessBar, но я не понимаю ваш комментарий со ссылкой на 0 <= val <= 0 ИЛИ синтаксис для setProperty `` '$ {val}%' `` </li>

0 <= val <= 0 является ошибкой и должен быть 0 <= val <= 100, т.е. аргумент val должен быть от 0 до 100

$ {val}% это нормальное использование аргументов в литералах шаблона if val == 45 получилось 45% (% - это просто персонаж, похожий на другой)

...