Wie verwende ich das HTML5-Fortschritts-Tag? Einführung in die Attribute des Fortschritts-Tags-H5-Tutorial-php.cn

Wie verwende ich das HTML5-Fortschritts-Tag? Einführung in die Attribute des Fortschritts-Tags

寻∝梦

Freigeben： 2018-09-04 11:08:41

Original

8296 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung des HTML5-Fortschritts-Tags sowie die Verwendung von Attributen des HTML5-Fortschritts-Tags vorgestellt. Schauen wir uns als nächstes gemeinsam diesen Artikel an

Lassen Sie uns zunächst die Verwendung des HTML5-Fortschritts-Tags vorstellen:

der Vorgang (Prozess).

Mit dem Tag können Sie den Fortschritt zeitaufwändiger Funktionen in Javascript anzeigen.

zeigt den Fortschritt der Aufgabe an, der Hintergrund ist grau und der abgeschlossene Teil wird mit einem pulsierenden grünen Balken gefüllt (aber die Stile sind in verschiedenen Browsern immer noch unterschiedlich).

Tipp: Bitte verwenden Sie das Tag , um den Fortschritt des Downloads anzuzeigen.

Sehen wir uns ein Beispiel für die Verwendung des HTML5-Fortschritts-Tags an:

Markieren Sie „Download-Fortschritt“:

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

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie verwende ich das HTML5-Fortschritts-Tag? Einführung in die Attribute des Fortschritts-Tags

Das Bild ist offensichtlich, daher werde ich nicht mehr sagen.

Lassen Sie uns nun über die Attribute des HTML5-Fortschritts-Tags sprechen:

1 Sie können den Prozentsatz (eine Dezimalzahl von 0 bis 1) über festlegen Wertattribut

Normalerweise können wir den Fortschrittswert auch innerhalb des Elements platzieren, sodass der Text als Backup-Lösung angezeigt werden kann, wenn der Browser (www.php.cn) ihn nicht unterstützt.

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

Nach dem Login kopieren

2, Sie können das Max-Attribut verwenden, um den Maximalwert festzulegen, dann ist der Wertebereich 0~Maximalwert

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

Nach dem Login kopieren

3, das Wertattribut gibt an Abschluss des Fortschrittsbalkens Für den Fortschritt liegt der Wertebereich zwischen 0 und max. Wenn das Max-Attribut nicht festgelegt ist, sollte das Value-Attribut zwischen 0 und 1 liegen.

Wenn kein Wert vorhanden ist, ist der Fortschritt der Fertigstellung ungewiss. Zu diesem Zeitpunkt bedeutet dies, dass die Aufgabe ausgeführt wird, aber es ist nicht bekannt, wie lange es dauern wird, bis sie abgeschlossen ist. Zu diesem Zeitpunkt kann der Fortschritt als Ladevorgang in Webkit-Browsern verwendet werden, was darauf hinweist, dass die Seite geladen wird oder dass Ajax Hintergrunddaten anfordert.

Wenn der Wert nicht festgelegt ist, stellt er einen unsicheren Fortschrittsbalken dar (der Fortschritt läuft in einer Schleife weiter)

<progress></progress>

Nach dem Login kopieren

Dieses dynamische Bild kann nicht angezeigt werden, Sie können einen Blick darauf werfen Machen Sie es selbst, so. Der Stil ist ziemlich interessant.

Tägliche Zusammenfassung des HTML5-Fortschritts-Tags:

Fortschritts-Tag: Dem Namen nach zu urteilen, können Sie wahrscheinlich erraten, was dieses Tag ist, ja, es ist ein Fortschrittsbalken. In HTML5 können wir endlich auf Spott verzichten.

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

Nach dem Login kopieren

Fortschrittsattribut: Wert: Zeigt den aktuellen Fortschritt an. max: Zeigt den Gesamtfortschritt an. Hinweis: Der Wert der Attribute „Wert“ und „Max“ muss größer als 0 sein und der Wert von „Wert“ muss kleiner oder gleich sein Wert des Max-Attributs. Fall:

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

Nach dem Login kopieren

Dadurch wird auch ein dynamischer Effekt eingerichtet. Der Effekt ist wie folgt:

Wie verwende ich das HTML5-Fortschritts-Tag? Einführung in die Attribute des Fortschritts-Tags

Dieses Bild ist dynamisch, da Screenshots dies nicht können Erfassen Sie den dynamischen Effekt, daher kann ich ihn nur so betrachten.

Dieser Artikel zur Anwendung des HTML5-Fortschrittsbalkens endet hier Fragen Sie unten.

[Empfehlung des Herausgebers]

Wie verwende ich den HTML5-Header-Tag? Einführung in die Funktion des HTML5-Header-Tags

Wie entferne ich die Unterstreichung eines HTML-Hyperlinks? Hier finden Sie alle Möglichkeiten, die Unterstreichung aus dem a-Tag zu entfernen

Das obige ist der detaillierte Inhalt vonWie verwende ich das HTML5-Fortschritts-Tag? Einführung in die Attribute des Fortschritts-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!