<section>
<progress id="progress" max="100" value="0">
<script>
// 实现动态进度条的效果
(function progressShow(){
let progress = document.getElementById("progress");
let max = progress.max;
let value = progress.value;
if(value == max){
clearTimeout(t);
}
// 将value值增加
value++;
// 将增加后的value值,重新设置value属性
progress.value = value;
// 设置定时器
t = setTimeout(progressShow,100);
})();
</script>
</section>
<section>
<meter id="meter" min="0" max="100" value="0" high="90" low="10">
<script>
// 实现刻度的动态效果(从min自增max)
(function meterShow(){
let meter = document.getElementById("meter");
let max = meter.max;
let value = meter.value;
if(value == max){
cleatTimeout(t);
}
value++;
meter.value = value;
t = setTimeout(meterShow,100);
})();
</script>
</section>