首页 > 其他 > 详细

progress与meter实现动态进度条

时间:2020-07-24 22:16:12      阅读:113      评论:0      收藏:0      [点我收藏+]
<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>

  

progress与meter实现动态进度条

原文:https://www.cnblogs.com/SharkJiao/p/13373774.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!