Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung des HTML-Fortschritts-Tags
Detaillierte Erläuterung der Verwendung des HTML-Fortschritts-Tags
- 黄舟Original
- 2017-07-08 13:56:193756Durchsuche
Das Tag
progress
progress definiert den Fortschritt (Prozess) einer laufenden Aufgabe.
Attribute
| Attribut | Wert | Beschreibung | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| max td> | number | Gibt den Maximalwert an, der vervollständigt werden soll | |||||||||||||||
| value | number | Gibt den aktuellen Wert des Prozesses an | |||||||||||||||
position
|
float | Gibt die aktuelle Position des Fortschritts zurück bar |
|||||||||||||||
| labels | - | Gibt die Tag-Liste des Fortschrittsbalkens zurück (falls vorhanden) |
max0.0~1.0Standardmäßig der Fortschrittswert reicht von max=100. Wenn auf 0~100. gesetzt, reicht der Fortschrittswertbereich von
valuemax=100. Wenn value=50, value , der Fortschritt beträgt genau die Hälfte.progressDas Vorhandensein oder Fehlen des Attributs bestimmt, ob der -Fortschrittsbalken Determinismusvalue aufweist. Wenn kein value vorhanden ist, wird der Browser-Fortschrittsbalken in einer Endlosschleife durchlaufen. aber sobald das Attribut
position
labels ist ebenfalls ein schreibgeschütztes Attribut, und Sie erhalten die Beschriftungselemente, die auf das Element progress verweisen.
Demo
- 3. PROGRESS erstellen
<!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>Stilkontrolle, Kompatibilität und Beispiele für HTML5-FortschrittselementeDas obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des HTML-Fortschritts-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!