如何在HTML中使用不同的步长属性来使用一个范围输入？
- WBOY转载
- 2023-09-09 14:13:061191浏览
允许的数字间隔由 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删除