HTML5のプログレスバー

1. <進行>タグのプログレスバー

値：指定されたプロセスの現在の値。デフォルト値は0である
最大：指定された値は、実行する必要があります。
PS：そこには、設定された最小値ではありません、または最小値は常に0です

<progress max="50" value="20"></progress>

あなたはプログレスバーの現在の値を設定しない場合は前後にジャンプします

<progress max="50"></progress>

小型ケース：プログレスバーを移動するように、値の値の動的な増加をタイマーを設定

<script>
    // 这种动态持续访问元素最好不要使用querySelector
    var progress = document.getElementById("progress")
    // 判断值是数组类型还是字符串
    console.log(typeof progress.value) //number
    // 设置定时器
    var timer = setInterval(function(){
        // 因为value是数字类型，可以直接使用加法运算
        progress.value++
        // 判断进度条是否已满
        if(progress.value >= 100){
            //清除定时器
            clearInterval(timer)
        }
    },50)
</script>

2. <メートル>タグ：定義された測定（ステータスバー）

共通属性：分/低/高/最大 / optinumは、
ディスク使用量、クエリ結果の相関、等：このタグは、主などの範囲の間隔の場合には現在の値を表示するために使用されます。
それは基準点として4つの重要な値を有し、最小の分、低値が小さいほど、より大きな値が高い場合、最大値maxです。
四つの値の範囲は3つのセクションに分かれている：[分、低）、[低、高]、（高、最大]
が中間optinum最適値の範囲内のデフォルトである。
表示サイズの現在の値に加えて、も間隔に配置される電流値、最適値optinumが色を決定するためにどの間隔

<!-- 基本使用 -->
<meter max="100" value="50" min="0" high="80" low="20"></meter>

カラー規則：
私たちは最高の範囲optinumのための最高値間隔としましょう
範囲の中間に最適な間隔のデフォルトは、左から右に、この時間は3つの黄色の色の範囲があるさ-緑-黄
、あなたが最適な範囲を設定した場合範囲の中間、最適な範囲は少し遠く黄、赤遠いの最良の範囲から、緑ではありません

<body>
    <p>最佳区间默认为中间区间</p>
    <div>
        <meter max="100" value="50" min="0" high="80" low="20"></meter>
    </div>
    <div>
        <meter max="100" value="10" min="0" high="80" low="20"></meter>
    </div>
    <div>
        <meter max="100" value="90" min="0" high="80" low="20"></meter>
    </div>
    <p>最佳区间设置为左边的区间</p>
    <div>
        <meter max="100" value="50" min="0" high="80" low="20" optimum="10"></meter>
    </div>
    <div>
        <meter max="100" value="10" min="0" high="80" low="20" optimum="10"></meter>
    </div>
    <div>
        <meter max="100" value="90" min="0" high="80" low="20" optimum="10"></meter>
    </div>
    <p>最佳区间设置为右边的区间</p>
    <div>
        <meter max="100" value="50" min="0" high="80" low="20" optimum="90"></meter>
    </div>
    <div>
        <meter max="100" value="10" min="0" high="80" low="20" optimum="90"></meter>
    </div>
    <div>
        <meter max="100" value="90" min="0" high="80" low="20" optimum="90"></meter>
    </div>
</body>

1. <進行>タグのプログレスバー

2. <メートル>タグ：定義された測定（ステータスバー）

おすすめ