Detaillierte Erklärung des HTML5-Fortschrittsbalkens

Ausführliche Erklärung des HTML5-Fortschrittsbalkens

Einführung in das HTML5-Fortschrittselement Fortschritt ist ein neues Element von HTML5, das bedeutet, einen Fortschrittsbalken zu definieren und Es ist vielseitig einsetzbar und kann zur Anzeige des Fortschritts des Datei-Uploads und des Datei-Downloads sowie als Ladestatusleiste zum Laden verwendet werden.

HTML5-Fortschrittsbalkensyntax '70' max= '100' &gt ; '70' max= '100' >

Klicken Sie hier, um zu sehen, wie der HTML5-Fortschrittsbalken aussieht.

HTML5-Fortschrittsattribut Fortschritt max max-Attribut stellt den maximalen Fortschrittswert des dar Wenn der Fortschrittsbalken vorhanden ist, muss er eine gültige Gleitkommazahl größer als 0 sein. Der Standardwert von max ist 1.

Fortschrittswert Das Wertattribut zeigt den Fortschritt des Fortschrittsbalkens an. Der Wertebereich ist 0 ~ zwischen max. Wenn das Max-Attribut nicht festgelegt ist, sollte das Value-Attribut zwischen 0 und 1 liegen.

Wenn kein Wert vorhanden ist, ist der Fertigstellungsfortschritt 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.

Das obige Bild wurde mit dem Chrome-Browser aufgenommen.

Fortschritt ohne das Festlegen eines Werts ist wie ein Laden, wobei der Fortschrittsblock in der Mitte hin und her wandert.

Der Fortschritt ohne Wert sieht in Fenster 7 wie folgt aus:

Es ist zwar etwas hässlich, aber es übernimmt den typischen Stil von Fenstern.

HTML5-Progress-Kompatibilität Progress wird in IE10+-Browsern unterstützt

HTML5-Fortschrittsanzeige des Fortschrittseffekts Der Simulationscode für den Fortschrittsanimationseffekt lautet wie folgt:

您的浏览器不支持progress元素

function goprogress(){ var pro=document.getElementsByTagName("progress")[0]; gotoend(pro,0); } function gotoend(pro,value){ var value=value+1; pro.value=value; if(value

Klicken Sie hier, um die Fortschrittsanimationssimulation anzuzeigen.

HTML5-Fortschrittsbezogene Stileinstellungen Wir können einen benutzerdefinierten Stil für den Fortschritt implementieren Lassen Sie uns als Beispiel über die Fortschrittsstile sprechen, die wir festlegen können.

Wir müssen das ändern Fortschritt Es sieht wie oben aus.

Der Code lautet wie folgt:

您的浏览器不支持progress元素 .mypro{ background:orange; border:1px solid red; border:2px solid #000; width:300px; height:50px; -webkit-appearance: none; } ::-ms-fill{ background:deeppink; } ::-moz-progress-bar{ background:deeppink; } ::-webkit-progress-bar{ background:orange; } ::-webkit-progress-value{ background:deeppink; }

rrreee

Fortschritt kann allgemeine Attribute wie Breite, Höhe, Rand usw. festlegen.

Für IE10+- und Firefox-Browser können Sie den Hintergrund verwenden, um die Hintergrundfarbe des Fortschrittsbalkens festzulegen.

Verwenden Sie für Webkit-Browser ::-webkit-progress-bar, um die Hintergrundfarbe des Fortschrittsbalkens festzulegen.

Verwenden Sie für IE10+ ::-ms-fill, um die Hintergrundfarbe des Fortschrittsbalkens für den Abschluss festzulegen.

Verwenden Sie für Firefox ::-moz-progress-bar, um die Hintergrundfarbe des Fortschrittsbalkens festzulegen.

Verwenden Sie für Webkit-Browser ::-webkit-progress-value, um die Hintergrundfarbe des Fortschrittsbalkens für den Abschluss festzulegen.

HINWEIS: ::-webkit-progress-bar-Einstellungen ist die Hintergrundfarbe des Fortschrittsbalkens und ::-moz-progres-bar legt die Hintergrundfarbe des Fortschrittsbalkens fest, um den Fortschritt abzuschließen, was genau das Gegenteil ist.

Und für Webkit-Browser unter IOS müssen Sie -wekbit-appearance:none verwenden, um den Standardstil des Fortschritts zu löschen, damit die Hintergrundfarbe und Die Fortschrittsfarbe kann geändert werden.

Klicken Sie hier, um den benutzerdefinierten Fortschrittsbalkenstil anzuzeigen.

HTML5-Fortschrittsabschluss

Wir können die Datei in Ajax2 hochladen, upload.onprogress Durch die Verwendung des Fortschritts im Ereignisrückruf kann der Fortschritt des Datei-Uploads einfach angezeigt werden. Sie können auch das progress-Element im onprogress-Ereignis verwenden, das im FileReader-Vorschaubild verwendet wird, um den Fortschritt des Bildlesens anzuzeigen.

In diesem Artikel wird der HTML5-Fortschrittsbalken erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einfache PHP+MySQL-Paging-Klasse

Zwei Baumarray-Konstruktoren ohne Rekursion

HTML in Excel konvertieren und implementieren Drucken, herunterladen Funktion

Detaillierte Erklärung des HTML5-Fortschrittsbalkens

In Verbindung stehende Artikel