Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-03-20 15:35:12
Original
2760 Leute haben es durchsucht

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>
Nach dem Login kopieren
ist ein sehr beeindruckender Fortschrittsbalken. Manche Leute fragen sich: „Oh, warum sehe ich ein Charakter-Emoticon?“ Nun ... ich kann Ihnen nur sagen: „Ich verachte Sie, zögern Sie so sehr, einen zuverlässigeren Browser zu verwenden?!“ ist die Standardeinstellung. Die Effekte sind in verschiedenen Browsern unterschiedlich, wie in den Screenshots unten (unter Windows 7) gezeigt:



Detaillierte Erläuterung des Fortschrittselements des Fortschrittsbalkens in HTML5 und Beispielcode für die KompatibilitätsverarbeitungDer langsame Konvergenzeffekt von IE10-Partikeln ist ziemlich auffällig. von.

2. Grundlegende

-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 Detaillierte Erläuterung des Fortschrittselements des Fortschrittsbalkens in HTML5 und Beispielcode für die Kompatibilitätsverarbeitung (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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage