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实现字体颜色渐变的实现
Mar 09 HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
amazeui时间组件的实现示例
Aug 18 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
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Django 中 cookie的使用
2017/08/17 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
Python实现大文件排序的方法
2015/07/10 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
python psutil库安装教程
2018/03/19 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
造价工程师个人求职信
2013/09/21 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
村主任当选感言
2015/08/01 职场文书
导游词之河北白洋淀
2020/01/15 职场文书