使用 JavaScript 更新进度条

Question

我不知道如何更新进度条。这是我的代码，

socket.on('value',function(data){
    console.log(data); // For example, this prints value '10'
 // Here i have to update progress bar.
}

我想将值除以10，平均并将进度宽度调整为100%。谁能帮我做这个？可能吗？我是这个概念的新手。请帮我解决这个问题。

Answer 1

如果您正在使用 <progress> 元素，您可以像这样在回调中更新它：

// suppose your <progress> element is defined this way:
<progress min=0 max=100 id="myProgressBar"></progress>

// updating it:
socket.on('value',function(data){
    console.log(data); // For example, this prints value '10'
    $("#myProgressBar").val(data / 10) // here is the one way to update it
}

您也可以省略除以 10（只调用 $("#myProgressBar").val(data) ）并在元素的属性中指定 max=10（或任何最大值）。

使用 JavaScript 更新进度条

Updating progress bar using JavaScript

html

javascript

css

progress-bar