html5中的input新属性range使用记录


Posted in HTML / CSS onSeptember 05, 2014

过了两天完全没有电脑,没有电视,手机又没有流量的生活,习惯了那样喧嚣的节奏,再回到那么清净的环境,不啻于一次洗涤,同时却有些惶恐,好像自己又什么都不会了,如果脱离了这个文明的社会,甚至可以说,我连基本的生存能力都没有,如果回到过去,我不知道能活多久。

感慨归感慨,当前的工作要完成,记录一个html5中的input新属性,range。发现这个属性是在一个网站的调色器中,感觉确实比较形象化,好看,就记录下了: 

复制代码
代码如下:

<input type="range" min="0" max="255">
<input type="text" id="show">

显示效果如下:

html5中的input新属性range使用记录 

这里看到了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">

显示效果如下:

html5中的input新属性range使用记录 

这样我们来写一个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改变幅度

调色器看起来不错的,回头要弄个看看,现在先去睡觉。

HTML / CSS 相关文章推荐
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 #HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 #HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 #HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 #HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 #HTML / CSS
html5 更新图片颜色示例代码
Jul 29 #HTML / CSS
Html5 语法与规则简要概述
Jul 29 #HTML / CSS
You might like
elgg 获取文件图标地址的方法
2010/03/20 PHP
微信API接口大全
2015/04/15 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Python上传package到Pypi(代码简单)
2016/02/06 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
关于人生的感言
2014/01/17 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
团日活动总结书格式
2014/05/08 职场文书
求职信结尾怎么写
2014/05/26 职场文书
会议室标语
2014/06/21 职场文书
校长创先争优承诺书
2014/08/30 职场文书
委托培训协议书
2014/11/17 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
详解Python中*args和**kwargs的使用
2022/04/07 Python