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

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

2018-02-28 747

在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-02-28

775

此属性是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-02-28

814

资源下载

更多资源

Mario

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

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

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

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。