首页 > web前端 > html教程 > 如何在HTML中使用不同的步长属性来使用一个范围输入?

如何在HTML中使用不同的步长属性来使用一个范围输入?

WBOY
发布: 2023-09-09 14:13:06
转载
1190 人浏览过

如何在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>
登录后复制

执行时上面的脚本,将分为两个步骤。一步为20;范围是从(1965-1994),另一个是步骤1,范围是从(1995-2015)。

以上是如何在HTML中使用不同的步长属性来使用一个范围输入?的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板