<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>
原文:https://www.cnblogs.com/SharkJiao/p/13373774.html