今天用HTML5结合Javascript制作了一款调色器,主要功能是通过移动滑块可以看到颜色的变化,并且rgb值也会随着变化,另外也可以通过输入rgb值来预览颜色。使用的技术其实很简单,滑动条使用html5中的表单做的,至于颜色的改变也就是js对dom的操作。下面具体看一下吧。
首先看一下滑块是怎么出来的:
在HTML5的input表单中有一个新增类型range,它所展现出的效果就是数字滑动条,当然这个受浏览器的制约,感觉在Chrome及Opera上呈现的效果不错,IE10上也行。
Html代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
简易调色器
R:
G:
B:
Author:BeyondWeb.cn v0.1
此时效果为:
后边文本框的作用是分别显示R、G、B的值,另外还可以通过手动输入值,来预览颜色。
然后,就是样式的控制了。
Css代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
*{margin:0;padding:0;}
body{color:#ccc;font:12px"Microsoft YaHei",微软雅黑,Verdana,sans-serif,宋体;background:#666url(images/bg.png)repeat;}
a,a:link,a:visited{color:#ccc;}
input:focus,a:focus{outline:none;}
.container{margin:50pxauto;width:280px;height:380px;padding:25px;border:10pxsolid#333;background:#333url(images/bg-content.png)repeat;}
.container h1{text-align:center;font-size:26px;font-weight:normal;color:#ccc;}
.colorShow{margin-top:10px;width:280px;height:180px;background:#000;}
.control{margin-top:20px;}
.control form p span,
.control input{display:block;}
.control form p{margin-top:10px;height:25px;}
.control form p span{float:left;width:20px;}
.control .inputRae{float:left;width:200px;}
.control .inputTxt{float:left;margin-left:5px;width:50px;padding:0;}
@mediaalland (min-width:0px){
.control .inputTxt{width:46px;}
}
.copyr{margin-top:40px;text-align:center;color:#666;}
.copyr a{color:#666;}
.copyr a:hover{color:#ccc;}
此时效果为:
最后,我们用Javascript进行逻辑处理。这一块主要是Javascript的DOM操作,动态获取滑块的value值,然后动态改变上面颜色预览框的背景色,同时在文本框里显示RGB的值,或者手动输入RGB颜色,然后即时的反馈到颜色预览框上。所用的事件处理也就两个:onchange()事件和onkeyup事件。下面就看一下代码吧。
Js代码: