1. 程式人生 > 實用技巧 >progress與meter實現動態進度條

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>