HTML5 implémente sa propre barre de progression et ses propres effets de curseur

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

Utilisez la balise de progression pour définir les valeurs min et max. Vous pouvez utiliser la valeur pour obtenir la valeur de progression

 function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = 'Progression :' + pg.value + '%' } else { pgv.innerHTML = 'Chargement terminé' clearInterval(minuterie) } }, ) }

L'effet final est le suivant :

Cet effet d'affichage est destiné au navigateur Chrome, IE et FireFox ont des styles différents !

Changements de style :

 progress{ -webkit-apparance: none; } ::-webkit-progress-bar{ /* Obtenir la progression */ background-color: orange; /* La couleur d'arrière-plan non remplie de la barre de progression*/ } ::-webkit-progress -value { background-color: rgb(, , ); /* Couleur d'arrière-plan de la partie remplie de la barre de progression*/ } ::-webkit-progress-inner-element { border: px solid black; La bordure intérieure de la barre de progression, faites attention à la distinguer du contour*/ }

Les styles ici sont tous destinés au noyau du webkit, et les autres styles ne sont pas pris en charge ~~~ L'effet est le suivant :

Définissez le type d’entrée sur plage. Cependant, tous les navigateurs ne prennent pas en charge cet attribut. Sinon, l'attribut par défaut sera renvoyé, à savoir <input type=text>.

(Pour plus de détails, veuillez vous référer à https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

Style par défaut :

 <div id=d> <p>Curseur déplaçable H :</p> <input type=range name=points min= max= id=hpro/> </div>

1. Livré avec des attributs :

 (1), valeur par défaut = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

Valeur par défaut = (définir la valeur maximale < définir la valeur minimale) ? Définir la valeur minimale : Définir la valeur minimale + (Définir la valeur maximale - Définir la valeur minimale) / 2 ---- En fait, prendre la valeur moyenne

Nous pouvons définir la valeur du curseur avec valeur = 7.

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

min : définir la valeur minimale ; max : définir la valeur maximale

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

step : définissez la valeur du pas, la valeur par défaut est 1. Si min ou max est défini avec un point décimal, par exemple : max=3,14, le point décimal ne peut pas être obtenu, alors vous pouvez définir step sur : step=any.

(4), hachures et étiquette :

Remarque : Actuellement, aucun navigateur ne prend entièrement en charge les deux attributs de hachage et d'étiquette. Par exemple, Firefox ne prend pas en charge les deux et Chrome prend en charge les marques de hachage mais pas l'étiquette.

a) les dièses :

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

b) étiquette :

 <input type=range name=points min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value= label=%> <option value=> <option value=> <option value => <valeur d'option=> <valeur d'option= label=%> <valeur d'option=> <valeur d'option=> <valeur d'option=> <valeur d'option=> <valeur d'option= label=%> </liste de données>

(5) La mise au point automatique peut définir ou indiquer si le curseur obtient automatiquement le focus. Après l'avoir réglé sur vrai, le curseur sera automatiquement verrouillé lors de l'accès à la page Web. Vous pouvez le contrôler en appuyant sur le haut, le bas, la gauche et la droite du clavier. .

2. Embellissement de l'apparence :

 input[type=range] { outline: none; -webkit-owned: none; /* Supprime le style d'apparence par défaut du système, souvent utilisé pour supprimer les styles natifs sous IOS*/ border-radius: px;

-webkit-apparence : aucun Supprimer les styles par défaut ;

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

::-webkit-slider-runnable-track est un élément de pseudo-classe CSS, qui n'est pas pris en charge par tous les navigateurs. Vous pouvez obtenir la trace de <input type=range>

Pour plus de détails, reportez-vous à : https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

 input[type=range]::-webkit-slider-thumb { -webkit-apparance: none /* Supprime le style par défaut du curseur*/ height: px width: px; margin-top: -px; # BE ; rayon de bordure : % ; bordure : solide .em rgba(, , , .);

::-webkit-slider-thumb peut obtenir la trace de <input type=range>

Ce qui précède est l'implémentation HTML5 présentée par l'éditeur avec sa propre barre de progression et son propre effet de curseur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. . Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !