zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    实验一
    BZOJ 2564
    P4557 [JSOI2018]战争
    移动自动化-Mac-IOS-appium环境搭建
    Node安装mac版本
    删除N天前文件和空文件
    Python之jsonpath模块
    性能学习
    参数化
    查找测试用例
  • 原文地址:https://www.cnblogs.com/SharkJiao/p/13373774.html
Copyright © 2011-2022 走看看