JavaScript CSS VoIP 测试的进度条

Question

我基本上有两个 div，一个绝对放在另一个之上。我还有一个来自应用程序的变量，表示 VoIP 测试完成的百分比。现在我需要让进度条使用 JavaScript.

调用百分比变量

有人告诉我我需要异步更新进度条，但我不确定该怎么做。我知道有很多方法可以做到这一点。我仍在学习 JavaScript 并且需要一个示例来使用。我已经尝试了一些我认为可行的方法，但我 post 这里只是最近的尝试。

我引用了这个 YouTube example/tutorial，但显然我没有使用 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>

Answer 1

css 变量名称的开头应始终有双破折号。
就我个人而言，我发现这个例子在 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>

let me pick your brain and try to pick this apart.

没问题朋友 ;)

double dash makes sense but I thought that JavaScript doesn't like dashes or other certain symbols.

它只是在文档中，对于 javascript 它不是符号或任何东西，只是一个字符串

使用 CSS 自定义属性（变量）==doc== or for ==JS part==

so #ressBar::before is for the width that is being changed and #ressBar::after is for the text "Loading..."?

文本“正在加载...”在 ::after、
而进度条在 ::before 中，所以它出现在下方。

将文本和进度条放在一起是个坏主意：
如果进度为零，则文本无法显示为空 space

is there a reason why the calculation for the "width" is under left vs right?

在我的代码中，蓝色条是其父项的 width: 100%。
它只是根据请求的进度值或多或少地向右“移动”。

超出的部分是其父元素的left的负值（#ressBar {，规则为css：overflow: hidden;
两大优势：
1- 你只需在父级上设置你想要的尺寸，没有其他 css 改变
2- 当蓝色条小于 1em

时，border-radius: 1em; 没有 css 问题

I don't understand how the JavaScript portion is working. I understand pRessBar but I don't understand your comment referencing 0 <= val <= 0 OR the syntax for setProperty ``` '${val}%' ``

0 <= val <= 0 是一个错误，应该是 0 <= val <= 100 也就是说 val 参数应该在 0 到 100 之间

${val}% 这是 Template literals 中参数的正常使用，如果 val==45 则为 45%（% 只是一个类似的字符）

JavaScript CSS VoIP 测试的进度条

JavaScript CSS Progress bar for a VoIP test

html

javascript

css

progress-bar