progress与meter实现动态进度条

<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