如何在HTML中使用不同的步長屬性來使用一個範圍輸入？
- WBOY轉載
- 2023-09-09 14:13:061166瀏覽
允許的數字間隔由 HTML 輸入類型步驟屬性決定。步驟是數字步驟，例如 0、2、4、6、8 等。若要建構有效值範圍，請將 step 屬性與 max 和 min 屬性結合。
它們在一定範圍內建立步進間隔，透過從左向右移動滑桿或上下移動微調器來執行該步進間隔。如果沒有明確提及，預設步驟將指派給各種輸入值。
文法
<input type="type name" step="number">
不同輸入值的預設步長值如下 -
| 輸入類型 | 值 | 範例 |
|---|---|---|
| 日期 | 1天 | |
| #月 | 1個月 | |
| #週 | 1週 | |
| 時間 | 60 秒 | |
| #本地日期時間 | 1秒 | |
| #數字 | 1 | |
| #範圍 | 1 |
#我們將使用 jQuery 在 HTML 的一個範圍輸入中提供不同的步驟屬性。以下是範例...
範例
在下面的範例中，我們建立了不同的步驟，如果值為
<!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>
執行時上面的腳本，將分成兩個步驟。一步為20；範圍是從(1965-1994)，另一個是步驟1，範圍是從(1995-2015)。
#以上是如何在HTML中使用不同的步長屬性來使用一個範圍輸入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除