Comment utiliser la balise de progression html5 ? Introduction aux attributs de la balise de progression-Tutoriel H5-php.cn

Comment utiliser la balise de progression html5 ? Introduction aux attributs de la balise de progression

寻∝梦

Libérer： 2018-09-04 11:08:41

original

8328 Les gens l'ont consulté

Cet article présente principalement l'utilisation de la balise de progression html5, ainsi que l'utilisation des attributs de la balise de progression html5. Ensuite, regardons cet article ensemble

Tout d'abord, introduisons l'utilisation de la balise de progression html5 :

l’opération (le processus).

Vous pouvez utiliser la balise pour afficher la progression des fonctions chronophages en JavaScript.

indique la progression de la tâche, l'arrière-plan est gris et la partie terminée est remplie d'une barre verte clignotante (mais les styles sont toujours différents selon les navigateurs).

Conseil : Veuillez utiliser la balise pour afficher la progression du téléchargement.

Regardons un exemple d'utilisation de la balise de progression html5 :

Marquer "progression du téléchargement" :

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

Copier après la connexion

L'effet est le suivant montré :

Comment utiliser la balise de progression html5 ? Introduction aux attributs de la balise de progression

La photo est évidente, donc je n'en dirai pas plus.

Parlons maintenant des attributs de la balise de progression html5 :

1 Vous pouvez définir le pourcentage (une décimale de 0 à 1) via le. attribut value

Habituellement, nous pouvons également placer la valeur de progression à l'intérieur de l'élément, de sorte que lorsque le navigateur (www.php.cn) ne la prend pas en charge, le texte puisse être affiché comme solution de sauvegarde.

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

Copier après la connexion

2, vous pouvez utiliser l'attribut max pour définir la valeur maximale, puis la plage de valeurs est 0 ~ valeur maximale

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

Copier après la connexion

3, le L'attribut value indique que la barre de progression est terminée. La plage de valeurs est comprise entre 0 et max. Si l'attribut max n'est pas défini, l'attribut value doit être compris entre 0 et 1.

S'il n'y a aucune valeur, alors la progression de l'achèvement est incertaine. À l’heure actuelle, cela signifie que la tâche est en cours, mais on ne sait pas combien de temps il faudra pour la terminer. À l'heure actuelle, la progression peut être utilisée comme chargement dans les navigateurs Webkit, indiquant que la page est en cours de chargement ou qu'Ajax demande des données d'arrière-plan.

Si la valeur n'est pas définie, elle représentera une barre de progression incertaine (la progression continuera à glisser en boucle)

<progress></progress>

Copier après la connexion

Cette image dynamique ne peut pas être affichée. regardez-le vous-même. Ce style est assez intéressant.

Résumé quotidien de la balise de progression html5 :

balise de progression : à en juger par le nom, vous pouvez probablement deviner ce qu'est cette balise, oui, c'est une barre de progression. En HTML5, nous pouvons enfin supprimer les moqueries.

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

Copier après la connexion

attribut progress : valeur : indique la progression actuelle max : indique la progression totale Remarque : la valeur des attributs value et max doit être supérieure à 0 et la valeur de value est inférieure ou égale à la valeur de l'attribut max. Cas :

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

Copier après la connexion

Cela définit également un effet dynamique, l'effet est comme indiqué ci-dessous :

Comment utiliser la balise de progression html5 ? Introduction aux attributs de la balise de progression

Cette image est dynamique car la capture d'écran est pris Cela ne peut pas être dynamique, donc je ne peux le voir que de cette façon. Vous pouvez l'essayer vous-même

Cet article sur l'application de l'étiquette de la barre de progression html5 se termine ici. demandez ci-dessous.

[Recommandation de la rédaction]

Comment utiliser la balise d'en-tête html5 ? Introduction à la fonction de la balise d'en-tête html5

Comment supprimer le soulignement du lien hypertexte html ? Voici toutes les façons de supprimer le soulignement de la balise a

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!