Comment utiliser une entrée de plage avec différents attributs d'étape en HTML ?-tutoriel HTML-php.cn

Comment utiliser une entrée de plage avec différents attributs d'étape en HTML ?

WBOY

Libérer： 2023-09-09 14:13:06

avant

1197 Les gens l'ont consulté

Comment utiliser une entrée de plage avec différents attributs détape en HTML ?

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">

Copier après la connexion

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	<输入类型=“时间”分钟=“09:00”步骤=“900”>
Date et heure locales	1 seconde
Nombres	1	<输入类型=“数字”分钟=“0”步骤=“0.1”最大=“10”>
Portée	1	<输入类型=“范围”分钟=“0”步骤=“2”最大=“10”>

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 <1995. <1995，则将当前步骤设置为 20，将其他步骤设置为 1。

<!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>

Copier après la connexion