HTML5のプログレスタグの使い方は？ progress タグの属性の概要-H5 チュートリアル-php.cn

HTML5のプログレスタグの使い方は？ progress タグの属性の概要

寻∝梦

リリース： 2018-09-04 11:08:41

オリジナル

8329 人が閲覧しました

この記事では、html5 progress タグの使い方と、html5 progress タグの属性の使い方を中心に紹介します。次に、この記事を一緒に読みましょう

まず、html5のprogressタグの使い方を紹介します

は、実行中の進行状況（プロセス）を定義します。

タグを使用すると、JavaScript で時間のかかる関数の進行状況を表示できます。

はタスクの進行状況を示し、背景は灰色で、完了した部分は緑色の脈動バーで塗りつぶされます (ただし、スタイルはブラウザーによって異なります)。

ヒント: ダウンロードの進行状況を表示するには、タグを使用してください。

HTML5 の進捗タグの使用例を見てみましょう:

「ダウンロードの進捗状況」をマークします:

对象的下载进度：
<progress value=&#39;70&#39; max=&#39;100&#39;></progress>

ログイン後にコピー

効果は図に示すとおりです:

HTML5のプログレスタグの使い方は？ progress タグの属性の概要

写真は明らかなので、私が勝ちましたそれ以上は言わないでください。

次に、HTML5 progress タグの属性について説明します:

1。value 属性を通じてパーセンテージ (0 から 1 までの小数) を設定できます

通常、内部に進捗値を配置することもできます。ブラウザ（www.php.cn）がサポートしていない場合、代替案としてテキストを表示できます。

<progress value="0.25">25%</progress>

ログイン後にコピー

2. max 属性を使用して最大値を設定できます。

<progress value="25" max="100">25%</progress>

ログイン後にコピー

3 の値の範囲は、進行状況を示します。は0〜最大です。 max 属性が設定されていない場合、value 属性の範囲は 0 から 1 である必要があります。

値がない場合、完了の進行状況は不確かです。現時点ではタスクが進行中であることを意味しますが、完了までにどれくらい時間がかかるかは不明です。現時点では、進行状況は Webkit ブラウザーの読み込みとして使用され、ページが読み込まれていること、または Ajax がバックグラウンドデータを要求していることを示します。

値が設定されていない場合は、不確実な進行状況バーを表します (進行状況はループ内でスライドし続けます)

<progress></progress>

ログイン後にコピー

このスタイルは、自分で試すことができます。

HTML5進捗タグの毎日の概要:

進捗タグ: 名前から判断すると、おそらくこのタグが何であるか推測できるでしょう。はい、これは進捗バーです。 HTML5 ではついにモックを廃止できるようになりました。

<progress id="PHP中文网" max="100"></progress>

ログイン後にコピー

progress 属性: value: 現在の進行状況を示します。 max: 合計の進行状況を示します。注: value および max 属性の値は 0 より大きい必要があり、value の値は max の値以下である必要があります。属性。ケース:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PHP中文网之progress标签的应用</title>
</head>
<body>
<h1>PHP中文网之progress标签的应用</h1>
<p>完成百分比：<progress max="100"></progress></p>
</body>
</html>

ログイン後にコピー

これにも動的効果が設定されています。効果は次の図に示すとおりです:

HTML5のプログレスタグの使い方は？ progress タグの属性の概要