HTML5 implementiert eigene Fortschrittsbalken- und Schiebereglereffekte

 <div id=d> <p id=pgv>Fortschritt: %</p> <progress id=pg max= value=></progress> </div>

Verwenden Sie das Fortschritts-Tag, um die Mindest- und Höchstwerte festzulegen. Sie können value verwenden, um den Fortschrittswert abzurufen

 function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = 'Fortschritt:' + pg.value + '%' } else { pgv.innerHTML = 'Laden abgeschlossen' clearInterval(timer) } }, ) }

Der Endeffekt ist wie folgt:

Dieser Anzeigeeffekt gilt für Chrome-Browser, IE und Firefox haben unterschiedliche Stile!

Stiländerungen:

 progress{ -webkit-appearance: none; } ::-webkit-progress-bar{ /* Fortschritt abrufen */ background-color: orange; /* Die ungefüllte Hintergrundfarbe des Fortschrittsbalkens*/ } ::-webkit-progress -value { background-color: rgb(, , ); /* Hintergrundfarbe des gefüllten Teils des Fortschrittsbalkens*/ } ::-webkit-progress-inner-element { border: px solid black; Achten Sie darauf, den inneren Rand des Fortschrittsbalkens vom Umriss zu unterscheiden*/ }

Die Stile hier gelten alle für den Webkit-Kernel, andere Stile werden nicht unterstützt ~~~ Der Effekt ist wie folgt:

Legen Sie den Eingabetyp auf „Bereich“ fest. Allerdings unterstützen nicht alle Browser dieses Attribut. Andernfalls wird das Standardattribut zurückgegeben, nämlich <input type=text>

(Einzelheiten finden Sie unter https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

Standardstil:

 <div id=d> <p>H ziehbarer Schieberegler:</p> <input type=range name=points min= max= id=hpro/> </div>

1. Kommt mit Attributen:

 (1), defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

Standardwert = (Maximalwert festlegen < Minimalwert festlegen)? Stellen Sie den Mindestwert ein: Stellen Sie den Mindestwert ein + (Stellen Sie den Höchstwert ein - Stellen Sie den Mindestwert ein) / 2 ---- Nehmen Sie tatsächlich den Mittelwert

Wir können den Wert des Schiebereglers mit Wert=7 festlegen.

(2), <input type=range min=-10 max=10>

min: Minimalwert festlegen; max: Maximalwert festlegen

(3), <input type=range min=5 max=10 step=0.01>

Schritt: Legen Sie den Schrittwert fest. Der Standardwert ist 1. Wenn min oder max mit einem Dezimalpunkt festgelegt wird, zum Beispiel: max=3,14, kann der Dezimalpunkt nicht ermittelt werden, dann können Sie den Schritt auf „step=any“ setzen.

(4), Rautezeichen und Beschriftung:

Hinweis: Derzeit unterstützt kein Browser die beiden Attribute Hash-Markierungen und Beschriftung vollständig. Firefox unterstützt beispielsweise nicht beide, und Chrome unterstützt Hash-Markierungen, jedoch keine Beschriftung.

a) Rautezeichen:

 <input type=range name=points min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value=> <option value=> <option value=> <option value=> < Optionswert=> <Optionswert=> <Optionswert=> <Optionswert=> <Optionswert=> <Optionswert=> <Optionswert=> </datalist>

b) Etikett:

 <Eingabetyp=Bereichsname=Punkte min= max= Schritt=beliebig id=hpro list=tickmarks/> <datalist id=tickmarks> <option value= label=%> <option value=> <option value=> <option value => <Optionswert=> <Optionswert= label=%> <Optionswert=> <Optionswert=> <Optionswert=> <Optionswert=> <Optionswert= label=%> </datalist>

(5) Der Autofokus kann festlegen oder zurückgeben, ob der Schieberegler automatisch den Fokus erhält. Nach dem Einstellen auf „True“ wird der Schieberegler beim Aufrufen der Webseite automatisch gesperrt. Sie können ihn steuern, indem Sie auf der Tastatur nach oben, unten, links und rechts drücken .

2. Verschönerung des Aussehens:

 input[type=range] { outline: none; -webkit-appearance: none; /* Entfernen Sie den standardmäßigen Erscheinungsbildstil des Systems, der häufig zum Entfernen nativer Stile unter IOS verwendet wird*/ border-radius: px }

-webkit-appearance: none; Standardstile entfernen

 input[type=range]::-webkit-slider-runnable-track { height: px; border-radius: px px #deff, inset .em .em #d }

::-webkit-slider-runnable-track ist ein CSS-Pseudoklassenelement, das nicht von allen Browsern unterstützt wird. Sie können die Spur von <input type=range> abrufen

Einzelheiten finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /* Den Standardstil des Sliders entfernen*/ height: px; margin-top: -px; # BE; border-radius: %; border: solid .em rgba(, , , .);

::-webkit-slider-thumb kann den Track von <input type=range> abrufen

Das Obige ist die vom Herausgeber vorgestellte HTML5-Implementierung mit eigenem Fortschrittsbalken und Schiebereglereffekt. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten . Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!