关灯
开启左侧

[网页制作] html5中的input新属性range使用记录

[复制链接]
swmozowtfl 发表于 2015-7-10 22:25:55 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
过了两天完全没有电脑,没有电视,手机又没有流量的生活,习惯了那样喧嚣的节奏,再回到那么清净的环境,不啻于一次洗涤,同时却有些惶恐,好像自己又什么都不会了,如果脱离了这个文明的社会,甚至可以说,我连基本的生存能力都没有,如果回到过去,我不知道能活多久。
感慨归感慨,当前的工作要完成,记录一个html5中的input新属性,range。发现这个属性是在一个网站的调色器中,感觉确实比较形象化,好看,就记录下了:
代码如下:
<input type=range min=0 max=255>
<input type=text id=show>
显示效果如下:

                               
登录/注册后可看大图

这里看到了type的两个属性 min和max,允许的最小范围和最大范围。同时我们还可以对这个range进行样式的设计
代码如下:
<input type=range min=0 max=255 style=height:100px;width:400px;background:yellow; onchange=change() id=range>
<input type=text id=show>
显示效果如下:

                               
登录/注册后可看大图

这样我们来写一个js方法,来改变数值,调色器中就这么应用的:(至于这个移动钮样式如何改变了还不太明白)
代码如下:
<script type=text/javascript>
function change(){
var num=document.getelementbyid(range);
var location=document.getelementbyid(show);
location.value=num.value;
}
</script>
这样就随着拖动位置的变化就改变了输入框中的值,放置三个的话就能生成颜色了嘛,这就是调色器的原理了
这里还要注意的就是range的其他两个属性value默认值和step改变幅度

更多网页制作信息请查看: 网页制作
 

精彩评论10

正序浏览
GoodyFouppy 发表于 2015-12-11 15:01:55 | 显示全部楼层
 
看你快沉底了~~~~~~
 
wwdu926a 发表于 2015-12-11 15:03:03 | 显示全部楼层
 
哈哈 我支持你
 
effoggikeftor 发表于 2015-12-11 15:02:30 | 显示全部楼层
 
嘿...反了反了,,,,
 
wwzcdenleclv 发表于 2015-12-11 15:01:31 | 显示全部楼层
 
唉!猪!你怎么了?
 
seazvyt 发表于 2015-12-11 15:02:14 | 显示全部楼层
 
手机版的得知互动论坛好强大
 
Acropozelan 发表于 2015-12-11 21:45:05 | 显示全部楼层
 
本人过去、现在以及将来都不认识楼主,且自古以来与楼主无利益关系。楼主表述之事与本人无关
 
effoggikeftor 发表于 2015-12-11 21:46:08 | 显示全部楼层
 
这个程序有没有漏洞啊
 
seazvyt 发表于 2015-12-11 21:45:22 | 显示全部楼层
 
下次有人骂我了...我给他还回去..
 
Acropozelan 发表于 2015-12-11 21:46:18 | 显示全部楼层
 
要睡觉了 呵呵
 
wwdu926a 发表于 2015-12-11 21:45:57 | 显示全部楼层
 
呵呵 放心 如我算错 你以后来砸我的帖子 呵呵
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

1粉丝

2503帖子

热门图文
热门帖子
排行榜
作者专栏

关注我们:微信订阅号

官方微信

APP下载

全国服务Q Q:

956130084

中国·湖北

Email:956130084@qq.com

Copyright   ©2015-2022  站长技术交流论坛|互联网技术交流平台Powered by©Discuz!技术支持:得知网络  

鄂公网安备 42018502006730号

  ( 鄂ICP备15006301号-5 )