Detaillierte Erläuterung des Fortschrittselements des Fortschrittsbalkens in HTML5 und Beispielcode für die Kompatibilitätsverarbeitung

HTML5Sie können das Fortschritts-Tag verwenden, um der Seite direkt einen Fortschrittsbalken hinzuzufügen, aber der Standardanzeigeeffekt ist hier in jedem Browser unterschiedlich Wir werden es tun. Schauen Sie sich das Fortschrittsbalken-Fortschrittselement in HTML5 an. Einführung und Kompatibilitätsverarbeitung

1 Grundverständnis des Fortschrittselements
1 >
Fortschrittselement Gehört zur HTML5-Familie und bezieht sich auf den Fortschrittsbalken. Unterstützt von IE10+ und anderen zuverlässigen Browsern. Der folgende einfache Code:

<progress>o(︶︿︶)o</progress>

Der langsame Konvergenzeffekt von IE10-Partikeln ist ziemlich auffällig. von.

-Attribute max, Wert,
Position und Beschriftungen. (1) max bezieht sich auf die Maximalwert. Bei der Standardeinstellung liegt der Fortschrittswertbereich zwischen 0,0 und 1,0. Wenn der Wert auf max=100 eingestellt ist, liegt der Wert zwischen 0 und 100 50, der Fortschritt ist genau die richtige Hälfte. Das Vorhandensein oder Fehlen des Wertattributs bestimmt, ob der Fortschrittsbalken deterministisch ist. Was ist die Bedeutung? Beispielsweise hat keinen Wert und ist unsicher. Unter dem IE10-Browser sieht es jedoch wie eine Endlosschleife aus Punktanimationen aus, sobald ein Wertattribut vorhanden ist (auch wenn es keinen Wert hat). , wie z. B. < Fortschrittswert>, wird ebenfalls als sicher angesehen und die virtuelle Punktanimation wechselt in den Feenmodus——>Der Balken ändert sich, wie im Screenshot unten gezeigt:


(3) position Es handelt sich um ein schreibgeschütztes Attribut. Wie der Name schon sagt, ist die aktuelle Fortschrittsposition der Wert von value / max. Wenn der Fortschrittsbalken unsicher ist, beträgt der Wert -1 (4) labels ist ebenfalls ein schreibgeschütztes Attribut, und es werden die Label-Elemente erhalten, die auf das Fortschrittselement verweisen. Beispielsweise gibt document.querySelector("progress").labels eine HTMLCollection zurück, und das Folgende ist ein Screenshot eines meiner Tests (aus dem Opera-Browser, derzeit scheinen FireFox18.0.2 und IE10 dies nicht zu unterstützen).

2. Beispiel für die Verarbeitung der Fortschrittselementkompatibilität

HTML-Code
CSS-Kompatibilitätscode

<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

Grundsätzlich perfekt. Behebt Unterschiede zwischen Browser.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Fortschrittselements des Fortschrittsbalkens in HTML5 und Beispielcode für die Kompatibilitätsverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!