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在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Python抽象类的新写法
2015/06/18 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
flask入门之表单的实现
2018/07/18 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
岗位职责的含义
2013/11/17 职场文书
物流管理专业应届生求职信
2013/11/21 职场文书
酒吧员工的岗位职责
2013/11/26 职场文书
列车长先进事迹材料
2014/01/25 职场文书
疾病捐款倡议书
2014/05/13 职场文书
新农村建设汇报材料
2014/08/15 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
复试通知单模板
2015/04/24 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
创业计划书之水果店
2019/07/18 职场文书
话题作文之学会尊重
2019/12/16 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript