HTML5のプログレスバーのprogress要素の詳細説明と互換処理のサンプルコード

HTML5進行状況タグを使用して、進行状況バーをページに直接追加できます。これは非常に魅力的ですが、各ブラウザーでのデフォルトの表示効果は異なります。ここでは、進行状況バーの進行状況を見ていきます。 HTML5 の要素 はじめに と互換性処理

1. progress 要素の基本的な理解
1. 基本 UI
progress 要素は HTML5 ファミリーに属し、プログレス バーを指します。 IE10+ およびその他の信頼できるブラウザーでサポートされています。以下は簡単なコードです:

<progress>o(︶︿︶)o</progress>

これは非常に印象的な進行状況バーです。 「ああ、なぜキャラクターの絵文字が表示されるの?」と疑問に思う人もいるかもしれませんが、「軽蔑する、あなたはより信頼性の高いブラウザを使用することにそんなに抵抗があるの?!」としか言えません。デフォルトの効果ですが、以下のスクリーンショット (ウィンドウ 7 の下) に示すように、異なるブラウザーでの効果は異なります。

IE10 パーティクルのスローモーション コンバージェンス効果は、非常に目を引きます。

2. 基本的な 属性
max、value、position、およびラベル (1) max は最大値を指します。デフォルトの場合、進行状況の値の範囲は 0.0 ～ 1.0 です。max=100 に設定されている場合、進行状況の値の範囲は 0 ～ 100 です。
(2) の値は、max=100、value=50 の場合、進行状況の値です。ちょうど半分です。 value 属性の有無によって、進行状況バーが決定的であるかどうかが決まります。どのような意味です？たとえば、 には値がなく、不確実であるため、IE10 ブラウザではドット アニメーションの無限ループのように見えますが、値属性が存在すると (値がなくても)、 < progress value> なども確実であるとみなされ、仮想ポイントのアニメーションがフェアリー モードに入ります—>下のスクリーンショットに示すように、バーが変化します:

(3 ) 名前が示すように、position は読み取り専用の属性です。現在の進行位置は value/max の値です。プログレスバーが不確実な場合、値は -1 です。

(4) ラベルも読み取り専用属性であり、取得されるのはプログレス要素を指すラベル要素です。たとえば、document.querySelector("progress").labels は HTMLCollection を返します。以下は、私のテストの 1 つのスクリーンショットです (Opera ブラウザから取得したもので、現在 FireFox18.0.2 と IE10 はサポートしていないようです)。

2. Progress要素互換処理例
htmlコード

<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

css互換コード

progress {   
    display: inline-block;   
    width: 160px;   
    height: 20px;   
    border: 1px solid #0064B4;     
    background-color:#e6e6e6;   
    color: #0064B4; /*IE10*/
}   
/*ie6-ie9*/
progress ie {   
    display:block;   
    height: 100%;   
    background: #0064B4;   
}   
progress::-moz-progress-bar { background: #0064B4; }   
progress::-webkit-progress-bar { background: #e6e6e6; }   
progress::-webkit-progress-value  { background: #0064B4; }

は基本的にブラウザ間の差異を完璧に解決します。

以上がHTML5のプログレスバーのprogress要素の詳細説明と互換処理のサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。