HTML5のプログレスバーのprogress要素とその互換処理の紹介

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

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

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

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

2. 基本属性

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

(3)名前が示すように、position は読み取り専用の属性です。現在の進行状況の位置は value/max の値です。プログレスバーが不確実な場合、値は -1 です。
(4) ラベルも読み取り専用属性であり、取得されるのはプログレス要素を指すラベル要素です。たとえば、
document.querySelector("progress").labels は HTMLCollection を返します。以下は私のテストの 1 つのスクリーンショットです (Opera ブラウザーから取得したものですが、現在 FireFox18.0.2 と IE10 はサポートしていないようです)。 。

2. Progress要素互換処理例

htmlコード

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

css互換コード

CSSコードはコンテンツをクリップボードにコピーします

1.progress {
2. display: inline-block;
3. width: 160px;
4. height: 20px;
5. border: 1px solid #0064B4;
6. background-color:#e6e6e6;
7. color: #0064B4; /*IE10*/
8.}
9./*ie6-ie9*/
10.progress ie {
11. display:block;
12. height: 100%;
13. background: #0064B4;
14.}
15.progress::-moz-progress-bar { background: #0064B4; }
16.progress::-webkit-progress-bar { background: #e6e6e6; }
17.progress::-webkit-progress-value { background: #0064B4; }

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

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