HTMLのprogressタグの使い方を詳しく解説-htmlチュートリアル-php.cn

HTMLのprogressタグの使い方を詳しく解説

黄舟

リリース： 2017-07-08 13:56:19

オリジナル

3809 人が閲覧しました

progress

progress タグは、実行中のタスクの進行状況 (プロセス) を定義します。 progress 标签定义运行中的任务进度（进程）。

属性

属性	值	描述
max	number	规定要完成的最大值
value	number	规定进程的当前值
position	float	返回进度条的当前位置
labels	-	返回进度条的标记列表(如有)

max缺省情况下进度值范围从0.0~1.0,如果设置成max=100,则进度取值范围从0~100.
value规定当前值,若max=100,value=50则进度刚好一半.value属性的存在与否决定了progress进度条是否具有确定性.当没有value时,浏览器进度条会无限循环,但是,一旦有了value属性(即使没有值),也被认为是确定的.
position是只读属性,该属性反映了当前进度的位置,就是value/max的值.
labels也是只读属性,得到的是指向该progress
属性

プロパティ	値	説明
max	number	完了する最大値を指定します
値	数値	を指定しますプロセスの現在値
位置	float	Return 進行状況バーの現在の位置
ラベル	-	進行状況バーのタグリスト (存在する場合) を返します

max

0.0~1.0

max=100

0 ～ 100 です。

position 属性は (値がない場合でも) 決定されたものとみなされます。これは、現在の進行状況の位置を反映します。 value/max.

labels も読み取り専用属性で、結果は progress 要素を指すラベル要素です

🎜🎜🎜。 🎜🎜3. PROGRESS を作成します🎜

<!DOCTYPE html>
<html>
<head>
<title>progress</title>
<meta charset="utf-8">
</head>
<body>

<script type="text/javascript">
function myFunction()
{
var x=document.createElement("PROGRESS");
x.setAttribute("value","80");
x.setAttribute("max","100");
document.body.appendChild(x);
}
</script>
<body>
创建PROGRESS:
<button onclick="myFunction()" id="myprogress">创建</button>
</body>
</html>

ログイン後にコピー

🎜4. Position 属性を使用します🎜

    <!DOCTYPE html>
<html>
<head>
    <title>progress</title>
    <meta charset="utf-8">
</head>
<body>

<script>
function myFunction()
{
    var x = document.getElementById("myProgress").position;
    document.getElementById("demo").innerHTML = x;
}
</script>
<body>
    <p>下载进度条:</p>
    <progress id="myProgress" value="50" max="100"></progress>
    <p id="demo"></p>
    <button onclick="myFunction()">获取进度值</button>
</body>
</html>

ログイン後にコピー

🎜HTML5 の進行状況要素のスタイルコントロール、互換性、例🎜

以上がHTMLのprogressタグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。