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 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 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
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php发送post请求的三种方法
2014/02/11 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
Javascript变量函数浅析
2011/09/02 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
python3中int(整型)的使用教程
2017/03/23 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
python 实现性别识别
2020/11/21 Python
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
三月学雷锋活动总结
2014/06/26 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
小学教师见习总结
2015/06/23 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
Redis 限流器
2022/05/15 Redis