Maison > Article > interface Web > Comment utiliser une entrée de plage avec différents attributs d'étape en HTML ?
Comment utiliser une entrée de plage avec différents attributs d'étape en HTML ?
- WBOYavant
- 2023-09-09 14:13:061166parcourir
L'espacement des nombres autorisé est déterminé par l'attribut étape du type d'entrée HTML. Les étapes sont des étapes numériques, telles que 0, 2, 4, 6, 8, etc. Pour construire une plage de valeurs valide, combinez l'attribut step avec les attributs max et min.
Ils établissent des intervalles de pas dans une plage, qui sont effectués en déplaçant le curseur de gauche à droite ou en déplaçant la roulette de haut en bas. Les étapes par défaut seront attribuées à diverses valeurs d'entrée si elles ne sont pas mentionnées explicitement.
Grammaire
<input type="type name" step="number">
Les valeurs de pas par défaut pour différentes valeurs d'entrée sont les suivantes -
| Type d'entrée | Valeur | Exemple |
|---|---|---|
| Date | 1 jour | |
| mois | 1 mois | |
| semaine | 1 semaine | |
| Heure | 60 secondes | |
| Date et heure locales | 1 seconde | |
| Nombres | 1 | |
| Portée | 1 |
Nous utiliserons jQuery pour fournir différents attributs d'étape dans une entrée de plage en HTML. Voici des exemples...
Exemple
Dans l'exemple ci-dessous, nous avons créé différentes étapes, en définissant l'étape actuelle à 20 et les autres étapes à 1 si la valeur est
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(function() {
$('#years').on('input change', function() {
var
element = $('#years'),
value = element.val(),
step;
if (value < 1995) {
step = 20;
}
else {
step = 1;
}
element.attr('step', step);
$('#value').text(value);
$('#step').text(step);
});
});
</script>
</head>
<body>
<div>
Current value: <span id="value"></span>
</div>
<div>
Current step: <span id="step"></span>
</div>
<div>
<input id="years" type="range" value="1965" min="1965" max="2015" />
</div>
</body>
</html>
Le script ci-dessus sera divisé en deux étapes une fois exécuté. Un échelon est de 20 ; la plage va de (1965 à 1994) et l'autre est l'échelon 1 et la plage va de (1995 à 2015).
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!