Explication détaillée de l'utilisation de la balise de progression HTML-tutoriel HTML-php.cn

Explication détaillée de l'utilisation de la balise de progression HTML

黄舟

Libérer： 2017-07-08 13:56:19

original

3809 Les gens l'ont consulté

La balise

progress

progress définit la progression (processus) d'une tâche en cours d'exécution.

Attributs

max td>

numéro

Spécifie la valeur maximale à compléter

valeur

numéro

Spécifie la valeur actuelle du processus

position

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

float

Renvoie la position actuelle de progress barre

étiquettes

Renvoie la liste des balises de la barre de progression (le cas échéant)

max0.0~1.0Par défaut, la valeur de progression va de max=100, Si défini sur 0~100., la plage de valeurs de progression est de

valuemax=100 spécifie la valeur actuelle. , la progression est exactement de moitié.value=50La présence ou l'absence de l'attribut détermine si la value barre de progression a un progressdéterminisme Lorsqu'il n'y a pas de , la barre de progression du navigateur bouclera à l'infini, mais une fois que l'attribut value est présent (même s'il n'a aucune valeur), il est également considéré comme certain. value

est un attribut en lecture seule, qui reflète la progression actuelle. position, qui est la valeur de value/max. position

est également un attribut en lecture seule, et ce que vous obtenez, ce sont les éléments d'étiquette pointant vers l'élément labels. progress

Démo

3. Créer un PROGRÈS

<!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>

Copier après la connexion

4. Utiliser l'attribut 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>

Copier après la connexion

Contrôle du style, compatibilité et exemples d'éléments de progression HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!