<input type="range">标签用法实例代码-低调大师

<input type="range">标签用法实例代码

2018-02-28 673

在HTML5中，又新增许多新<input>控件类型，比较实用的一个就是<input type="range">，以滑竿的方式来调整value值，在这以前需要通过模拟才能够实现，下面就通过代码实例介绍一下它的作用。

代码如下:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

      <!DOCTYPE html> 
     
 
      <
      html
      >  
     
 
      <
      head
      >  
     
 
      <
      meta 
      charset
      =
      " utf-8"
      >  
     
 
      <
      meta 
      name
      =
      "author" 
      content
      =
      "http://www.softwhy.com/" 
      />  
     
 
      <
      title
      >蚂蚁部落</
      title
      >  
     
 
      <
      style 
      type
      =
      "text/css"
      >  
     

      #demo{
     
 
        
      width:50px; 
     
 
        
      height:50px; 
     
 
        
      background:red; 
     

      }
     
 
      </
      style
      >  
     
 
      <
      script 
      type
      =
      "text/javascript"
      >  
     

      window.onload=function(){
     
 
        
      var demo=document.getElementById("demo"); 
     
 
        
      var range=document.getElementById("range"); 
     
 
        
      range.onmousemove=function(){ 
     
 
          
      demo.style.width=this.value+"px"; 
     
 
        
      } 
     

      }
     
 
      </
      script
      >  
     
 
      </
      head
      >  
     
 
          
     
 
      <
      body
      >  
     
 
      <
      div 
      id
      =
      "demo"
      ></
      div
      > 
     
 
      <
      input 
      type
      =
      "range" 
      step
      =
      "1" 
      max
      =
      "500" 
      min
      =
      "10" 
      value
      =
      "50" 
      id
      =
      "range"
      /> 
     
 
      </
      body
      >  
     
 
      </
      html
      > 
     

以上代码可以平滑的拖动空间按钮来调整div的宽度，大家可以特别注意下此空间的几个常用属性，step用来规定，拖动数据变动的最小跨度，max规定最大值，min规定最小值。还有一个要特别注意的点是:实现此平滑拖动效果最好用onmousemove事件，在各个浏览器表现都是一致的，使用onchange事件在最新的谷歌和火狐浏览器中并不是平滑的。

原文发布时间为：2017-3-7

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：<input type="range">标签用法实例代码

微信关注我们

原文链接：https://yq.aliyun.com/articles/561610

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

禁止页面缓存数据的方法分享

有时候可能我们不需要网页缓存数据，而是要实时从服务器更新最新的内容，下面就简单介绍一下能够实现此功能的代码，希望能够给需要的朋友带来一定的帮助。实现方法一: 1 2 3 4 5 < head > < meta http-equiv = "Pragma" content = "no-cache" > < meta http-equiv = "Cache-Control" content = "no-cache" > < meta http-equiv = "Expires" content = "0" > </ head > 在网页的头部添加如下元素。实现方法二: 1 2 3 4 5 Response.Buffer = True Response.ExpiresAbsolute = Now() - 1 Response.Expires = 0 Response.CacheControl = "no-cache" Response.AddHeader "Pragma", "No-Cache" 上面的代码是ASP使用的方式，可以...

2018-03-01

721

此属性是html5新增的属性。使用它可以存储用户自定的属性。使用javascript可以访问这些自定义的属性。语法结构: 1 < element data-*="somevalue"> 语法规范如下: 1.属性名称不能够有大写字母。 2.属性名称分为两个部分，"data-"是固定的前缀，后面是任意合法的字符串名称。 3.属性值可以是任意合法的字符串。代码实例: 1 2 3 4 5 < ul > < li data-css = "css" >css教程</ li > < li data-js = "javascript" >javascript教程</ li > < li data-jquery = "jquery" >jquery教程</ li > </ ul > 原文发布时间为：2017-2-19 本文作者：admin 本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落原文链接：html5标签的data-*属性用法简单介绍

2018-03-01

740

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。