如何在HTML5进度条中使用变量？

Question

<progress id="bar" max="25" value="5"></progress>

正如您所看到的，max是一个整数，值也是。 如何更改进度条以使其与变量兼容。

例如：

<progress id="PROGRESSBAR" max="VARIABLEMAX" value="VARIABLEVALUE"></progress>

这不起作用：

<progress id="expbar" max="upcost" value="clicks"></progress>
<script>

    document.getElementById("expbar").setAttribute("max", upcost);
    document.getElementById("expbar").setAttribute("value", clicks);

    var clicks = 0; // How many clicks you have
    var upgrades = 0; // How many upgrades you have purchased
    var upcost = 25; // How much the upgrades cost

Answer 1

如果您使用的是jQuery，则可以使用：

var v = 25;
$("#bar").attr("max", v).attr("value", v);

使用JavaScript

这应该有效：

var v = 25;
document.getElementById("bar").setAttribute("max", v);
document.getElementById("bar").setAttribute("value", v);