如何在HTML中使用不同的步長屬性來使用一個範圍輸入？-html教學-PHP中文網

文法

範例

執行時上面的腳本，將分成兩個步驟。一步為20；範圍是從(1965-1994)，另一個是步驟1，範圍是從(1995-2015)。 " >執行時上面的腳本，將分成兩個步驟。一步為20；範圍是從(1965-1994)，另一個是步驟1，範圍是從(1995-2015)。

首頁

web前端

html教學

如何在HTML中使用不同的步長屬性來使用一個範圍輸入？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 pm 02:13 PM

html 步長屬性範圍輸入

如何在HTML中使用不同的步長屬性來使用一個範圍輸入？

允許的數字間隔由 HTML 輸入類型步驟屬性決定。步驟是數字步驟，例如 0、2、4、6、8 等。若要建構有效值範圍，請將 step 屬性與 max 和 min 屬性結合。

它們在一定範圍內建立步進間隔，透過從左向右移動滑桿或上下移動微調器來執行該步進間隔。如果沒有明確提及，預設步驟將指派給各種輸入值。

文法

<input type="type name" step="number">

登入後複製

不同輸入值的預設步長值如下 -

輸入類型	值	範例
日期	1天
#月	1個月
#週	1週
時間	60 秒	<输入类型=“时间”分钟=“09:00”步骤=“900”>
#本地日期時間	1秒
#數字	1	<输入类型=“数字”分钟=“0”步骤=“0.1”最大=“10”>
#範圍	1	<输入类型=“范围”分钟=“0”步骤=“2”最大=“10”>

#我們將使用 jQuery 在 HTML 的一個範圍輸入中提供不同的步驟屬性。以下是範例...

範例

在下面的範例中，我們建立了不同的步驟，如果值為 <1995，則將目前步驟設為 20，將其他步驟設為 1。 <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>

登入後複製