Question

如何用html5使用<meter>与<details>实现一个进度条演示

Answer 1

<div>显示度量值： <span id="value">0</span>%</div>
<meter id="meter" min="0" max="100" value="0"></meter>
<details>
    <summary>注释：</summary>
    <p>IE 不支持 meter 标签</p>
    <p>进度条每0.5秒钟增加1%，直至到100%，然后再重复</p>
</details>

<script>
let meter = document.getElementById('meter');
let myValue = document.getElementById('value');

setInterval(function () {
    if (meter.value == 100) {
        meter.value = 0;
    } else {
        meter.value += 1;
    }
    myValue.innerHTML = meter.value;
}, 500)
</script>