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

简介:

在HTML5中,又新增许多新控件类型,比较实用的一个就是,以滑竿的方式来调整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
< 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

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

相关文章
CSS之选择器(十)&lt;label&gt; 和 &lt;input&gt;
CSS之选择器(十)&lt;label&gt; 和 &lt;input&gt;
CSS之选择器(十)&lt;label&gt; 和 &lt;input&gt;
Elastic:doc[‘field‘].value与params._source[‘field‘]的区别;doc循环依赖问题
今天有同学问到doc['field'].value与params._source['field']用法的区别,起因在于下述的一道题的解法上,下面详细讲述下我的看法
233 0
Elastic:doc[‘field‘].value与params._source[‘field‘]的区别;doc循环依赖问题
报错:JSONException: illegal identifier : {pos 1, line 1, column 2{{&quot;group&quot;:&quot;trade_p0&qu
报错:JSONException: illegal identifier : {pos 1, line 1, column 2{{&quot;group&quot;:&quot;trade_p0&qu
669 0
原创| Python中&quot;等于&quot;到底用 == 还是 is ?
原创| Python中&quot;等于&quot;到底用 == 还是 is ?
298 0
原创| Python中&quot;等于&quot;到底用 == 还是 is ?
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt; &lt;html&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Cont
综述   内存泄漏(memory leak)是指由于疏忽或错误造成程序未能释放已经不再使用的内存。那么在Android中,当一个对象持有Activity的引用,如果该对象不能被系统回收,那么当这个Activity不再使用时,这个Activity也不会被系统回收,那这么以来便出现了内存泄漏的情况。
1864 0
JSTL 模板中 &lt;c:forEach&gt; 标签详解
详解 标签的语法定义如下所示。                                                 body content                                标签具有以下一些属性:l            var:迭代参数的名称。
1144 0
[C#]List的Sort()、Find()、FindAll()、Exist()的使用方法举例
[转]http://www.cnblogs.com/dooroo/archive/2012/12/11/2813858.html public class student { //构造函数 public student(int _number, ...
1415 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等