今天用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代码：