Detaillierte Einführung und Kompatibilitätsverarbeitung des Fortschrittselements in HTML5

In diesem Artikel werden Ihnen hauptsächlich die grundlegenden Attribute und die Kompatibilitätsverarbeitung des Fortschrittselements vorgestellt. Nach der Einführung des Fortschrittselements hilft auch der folgende Fall, es besser zu verstehen. ,

1. Grundlegendes Verständnis des Fortschrittselements

1. Grundlegende Benutzeroberfläche

Das Fortschrittselement gehört zur HTML5-Familie, die sich auf Fortschrittsbalken bezieht . Unterstützt von IE10+ und anderen zuverlässigen Browsern. Das Folgende ist ein einfacher Code:

XML/HTML Code kopiert den Inhalt in die Zwischenablage

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

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, Sie zögern so sehr, einen zuverlässigeren Browser zu verwenden?!“ 🎜 >Dieser Standardeffekt hat unter verschiedenen Browsern unterschiedliche Auswirkungen, wie in den Screenshots unten gezeigt (unter Windows 7):

Kompatibilität

Der Zeitlupenkonvergenzeffekt von IE10-Partikeln ist ziemlich gut auffällig.

2. Grundattribute

max, Wert,

Position

und Beschriftungen. (1) max bezieht sich auf den Maximalwert. Bei Standardeinstellung liegt der Fortschrittswertbereich zwischen 0,0 und 1,0 =50 Der Fortschritt beträgt genau die 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. , gilt ebenfalls als sicher. Die virtuelle Punktanimation wechselt in den Feenmodus. Die Position des Balkens ändert sich

(3) und ist schreibgeschützt Wie der Name schon sagt, ist die Position des aktuellen Fortschritts der Wert von value/max. Wenn der Fortschrittsbalken unsicher ist, beträgt der Wert -1.

(4) labels ist ebenfalls ein schreibgeschütztes Attribut, und was erhalten wird, sind die Beschriftungselemente, 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 werden FireFox18.0.2 und IE10 nicht angezeigt). um es zu unterstützen).

Progress-Element-Kompatibilitätsverarbeitungsbeispiel

HTML-Code

XML/HTML-Code Inhalt in Zwischenablage kopieren

CSS-kompatibler Code

CSS-Code kopiert Inhalte in die Zwischenablage

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

1.progress {
2. display: inline-block;
3. width: 160px;
4. height: 20px;
5. border: 1px solid #0064B4;
6. background-color:#e6e6e6;
7. color: #0064B4; /*IE10*/
8.}
9./*ie6-ie9*/
10.progress ie {
11. display:block;
12. height: 100%;
13. background: #0064B4;
14.}
15.progress::-moz-progress-bar { background: #0064B4; }
16.progress::-webkit-progress-bar { background: #e6e6e6; }
17.progress::-webkit-progress-value { background: #0064B4; }

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte finden Sie hier php Chinesische Website Andere verwandte Artikel!

Verwandte Lektüre:

Implementierungsschritte für die Verwendung von Js zum Betreiben von HTTP-Cookies

Detaillierte Einführung in das BOM-Objektmodell von Js

Was ist die allgemeine Syntax von AJAX

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