允许的数字间隔由 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>
以上是如何在HTML中使用不同的步长属性来使用一个范围输入?的详细内容。更多信息请关注PHP中文网其他相关文章!