<div id=d> <p id=pgv>進行状況: %</p> <progress id=pg max= value=></progress> </div>
progress タグを使用して、最小値と最大値を設定します。 value を使用して進行状況の値を取得できます
function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = '進行状況:' + pg.value + '%' } else { pgv.innerHTML = '読み込みが完了しました'クリアインターバル(タイマー) } }, ) }最終的な効果は以下の通りです。
この表示効果はChromeブラウザのもので、IEとFireFoxではスタイルが異なります！
スタイルの変更:
progress{ -webkit-Appearance: none; } ::-webkit-progress-bar{ /* 進行状況を取得 */ background-color: orange; /* 進行状況バーの塗りつぶされていない背景色 */ } ::-webkit-progress -value { background-color: rgb(, , ); /* プログレスバーの塗りつぶし部分の背景色*/ } ::-webkit-progress-inner-element { border: px ソリッドブラック; /*プログレスバーの内側の境界線。アウトラインとの区別に注意してください*/ }ここのスタイルはすべて Webkit カーネル用であり、他のスタイルはサポートされていません~~~ 効果は次のとおりです。
2. H5にはスライダーが付属します入力タイプをレンジに設定します。ただし、すべてのブラウザがこの属性をサポートしているわけではありません。サポートしていない場合は、デフォルトの属性である <input type=text> が返されます。
(詳細はhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/rangeを参照してください)
デフォルトのスタイル:
<div id=d> <p>H ドラッグ可能なスライダー:</p> <input type=range name=points min= max= id=hpro/> </div>
1. 以下の属性が付属します。
(1)、defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
デフォルト値 = (設定最大値 < 設定最小値)?最小値の設定: 最小値の設定 + (最大値の設定 - 最小値の設定) / 2 ---- 実際には中間値を取ります。
value=7 でスライダーの値を設定できます。
(2)、 <input type=range min=-10 max=10>
min: 最小値を設定します。max: 最大値を設定します。
(3)、 <input type=range min=5 max=10 step=0.01>
step: ステップ値を設定します。デフォルトは 1 です。 min または max が小数点を使用して設定されている場合 (例: max=3.14)、小数点を取得できない場合は、step を step=any に設定できます。
(4)、ハッシュマークとラベル:
注: 現在、ハッシュ マークとラベルの 2 つの属性を完全にサポートしているブラウザはありません。たとえば、Firefox は両方をサポートしていません。また、Chrome はハッシュ マークをサポートしていますが、ラベルはサポートしていません。
a) ハッシュマーク:
<input type=range name=points min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value=> <option value=> <option value=> <option value=> <オプション値=> <オプション値=> <オプション値=> <オプション値=> <オプション値=> <オプション値=> <オプション値=> </datalist>
b) ラベル:
<input type=range name=points min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value= label=%> <option value=> <option value=> <option value => <オプション値=> <オプション値= ラベル=%> <オプション値=> <オプション値=> <オプション値=> <オプション値=> <オプション値= ラベル=%> </datalist>
(5) オートフォーカスは、スライダーが自動的にフォーカスを取得するかどうかを設定または戻すことができます。これを true に設定すると、キーボードの上下左右を押すとスライダーが自動的にロックされます。 。
2.外観の美化：
input[type=range] { summary: none; -webkit-Appearance: none; /* IOS でネイティブ スタイルを削除するためによく使用される、システムのデフォルトの外観スタイルを削除します*/ border-radius: }-webkit-Appearance: なし; デフォルトのスタイルを削除します。
input[type=range]::-webkit-slider-runnable-track { 高さ: px; ボーダー半径: px; ボックスシャドウ: px px #deff, inset .em .em #d; ::-webkit-slider-runnable-track は CSS 疑似クラス要素であり、すべてのブラウザーでサポートされているわけではありません。 <input type=range>の軌跡を取得できます
詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track を参照してください。
input[type=range]::-webkit-slider-thumb { -webkit-Appearance: none; /* スライダーのデフォルトのスタイルを削除します*/ height: px width: px; # BE; ボーダー半径: %; ボーダー: ソリッド .em rgba(, , , .); ::-webkit-slider-thumb は<input type=range>のトラックを取得できます
上記は、エディターが独自のプログレス バーとスライダー効果を使用して紹介した HTML5 実装です。ご質問があれば、メッセージを残してください。エディターがすぐに返信します。 。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！