Fortschritts- und Meterkontrollen in HTML5

In HTML5 hat Fortschritts- und Messelemente Steuerelemente hinzugefügt. Die Fortschrittskontrolle ist ein Fortschrittsbalken-Steuerelement, das den Fortschritt von Aufgaben darstellen kann, wie z. B. den Fortschritt der Software-Installation, des Kopierens von Dateien und anderer Szenarien in Windows-Systemen. Bei der Metersteuerung handelt es sich um eine Messbalkensteuerung, die eine bestimmte Messung darstellt und für quantitative Ausdrücke wie Temperatur, Gewicht und Menge geeignet ist.

Inhaltsverzeichnis

1.

　1.1 Funktionen

2.

　2.1 Funktionen

　2.2 Beispiel

1.

Beschreibung

: Zeigt den Fortschritt an der Aufgabe, zum Beispiel den Fortschritt von Szenarien wie der Softwareinstallation und dem Kopieren von Dateien in Windows-Systemen. 1.1 Funktionen

Syntax

:

<progress value="0.5">50%</progress>

Attribute:

max

{Zahl}: Maximalwert des Fortschrittsbalkens festlegen oder abrufen. Standardwert: Wenn diese Eigenschaft nicht festgelegt ist, beträgt der maximale Wert des Steuerelements 1.

Wert

{Zahl}: Den aktuellen Wert des Fortschrittsbalkens festlegen oder abrufen. Standardwert: Wenn dieser Wert nicht festgelegt ist, ist der Fortschrittsbalken vom Typ „unsicher“ und enthält keine spezifischen Fortschrittsinformationen, wenn kein Max-Attribut vorhanden ist (das Standardmaximum des Fortschrittsbalkens ist 1). , der Standardwertbereich liegt zwischen 0,01 und 1,0. Bei der Einstellung 0,2 bedeutet dies einen Fortschritt von 20 %.

Mindestunterstützung der Browserversion

: IE 10, Chrome 8

Kontrollinhalt

: Wenn der Browser dieses Steuerelement nicht unterstützt, wird das Steuerelement angezeigt angezeigt Der Inhalt des Steuerelements wird von Browsern, die dieses Steuerelement unterstützen, nicht angezeigt. 1.2 Beispiel

Beispiel 1: Wertattribut enthalten

进度：<progress value="0.25" >25%</progress>

Beispiel 2: Enthält max-Attribut

进度：<progress max="100" value="25" >25%</progress>

Beispiel 3: Unsicherer Fortschrittsbalken (kein Wertattribut)

进度：<progress >正在下载...</progress>

IE8

: Textinhalt anzeigen.

IE11

: Zeigt einen Animationseffekt von links nach rechts an.

Chrome

: Zeigt einen Animationseffekt von links nach rechts und dann von rechts nach links an.

2. Erklärung

: Zeigt eine bestimmte Messung an, geeignet für Temperatur, Gewicht, Menge, usw. Quantitative Leistung.

2.1 Funktionen

Syntax:

Attribute:

进度：<meter value="0.5"></meter>

Wert {Zahl}: Legen Sie den Wert dieses Steuerelements fest oder rufen Sie ihn ab, der zwischen dem Mindest- und Höchstwert liegen muss.

max {Zahl}: Legen Sie den Maximalwert dieses Steuerelements fest.

Standardwert: Wenn diese Eigenschaft nicht festgelegt ist, beträgt der maximale Wert des Steuerelements 1.

min

{Zahl}: Legen Sie den Mindestwert dieses Steuerelements fest.

Standardwert: Wenn diese Eigenschaft nicht festgelegt ist, ist der Mindestwert des Steuerelements 0.

niedrig

{Zahl}: Legen Sie den zu niedrigen Schwellenwert fest. Wenn der Wert kleiner als niedrig und größer als min ist, wird die Farbe angezeigt, die zu niedrig ist.

hoch {Zahl}: Legen Sie einen zu hohen Schwellenwert fest. Wenn der Wert größer als hoch und kleiner als max. ist, wird eine zu hohe Farbe angezeigt.

optimal {Zahl}: Legen Sie den optimalen Wert fest,

Mindestunterstützung der Browserversion: IE unterstützt nicht, Chrome 8

Kontrollinhalt: Wenn der Browser dieses Steuerelement nicht unterstützt, wird der Inhalt im Steuerelement angezeigt. Browser, die dieses Steuerelement unterstützen, zeigen den Inhalt des Steuerelements nicht an.

2.2 Beispiel

Beispiel 1: Kein Attribut

Beispiel 2: Wert < max(max ist standardmäßig 1,0)

进度：<meter></meter>

Beispiel 3: Wert = max(max ist standardmäßig 1,0)

进度：<meter value="0.5"></meter>

Beispiel 4: Wert > max(max ist standardmäßig 1,0)

进度：<meter value="1"></meter>

Beispiel 5: Wert < )

进度：<meter value="5"></meter>

示例6：value = min(min默认为0)

进度：<meter value="0"></meter>

示例7：value > min(min默认为0)

进度：<meter value="0.5"></meter>

示例8：value < high

进度：<meter value="0.5" high="0.8"></meter>

示例9：value = high

进度：<meter value="0.8" high="0.8"></meter>

示例10：value > high

进度：<meter value="0.9" high="0.8"></meter>

示例11：value < low

进度：<meter value="0.1" low="0.25"></meter>

示例12：value = low

进度：<meter value="0.25" low="0.25"></meter>

示例13：value > low

进度：<meter value="0.5" low="0.25"></meter>

示例14：optimum < low < value < high

进度：<meter low="0.25" optimum="0.15" high="0.75" value="0.5"></meter>

示例15：low < optimum = value < high

进度：<meter low="0.25" optimum="0.5" high="0.75" value="0.5"></meter>

示例16：low < value < high < optimum

进度：<meter low="0.25" optimum="0.85" high="0.75" value="0.5"></meter>

示例17：value < low < high < optimum

进度：<meter low="0.25" optimum="0.85" high="0.75" value="0.2"></meter

示例18：optimum < low < high < value

进度：<meter low="0.25" optimum="0.2" high="0.75" value="0.8"></meter>

 

Das obige ist der detaillierte Inhalt vonFortschritts- und Meterkontrollen in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!