HTML5+Js制作的一款简易调色器

今天用HTML5结合Javascript制作了一款调色器，主要功能是通过移动滑块可以看到颜色的变化，并且rgb值也会随着变化，另外也可以通过输入rgb值来预览颜色。使用的技术其实很简单，滑动条使用html5中的表单做的，至于颜色的改变也就是js对dom的操作。下面具体看一下吧。

首先看一下滑块是怎么出来的：

在HTML5的input表单中有一个新增类型range，它所展现出的效果就是数字滑动条，当然这个受浏览器的制约，感觉在Chrome及Opera上呈现的效果不错，IE10上也行。

Html代码：

此时效果为：

后边文本框的作用是分别显示R、G、B的值，另外还可以通过手动输入值，来预览颜色。

然后，就是样式的控制了。

Css代码：

此时效果为：

最后，我们用Javascript进行逻辑处理。这一块主要是Javascript的DOM操作，动态获取滑块的value值，然后动态改变上面颜色预览框的背景色，同时在文本框里显示RGB的值，或者手动输入RGB颜色，然后即时的反馈到颜色预览框上。所用的事件处理也就两个：onchange()事件和onkeyup事件。下面就看一下代码吧。

Js代码：

Ok，简单的介绍完了，在下面提供的有Demo演示和代码下载链接：

最后总结一下，这个调色器还是很不完善的，尤其是在浏览器兼容上有很大问题，目前只在Chrome及Opera上表现还算凑合，在ie10上滑块样式不是太好，ff不支持，当然这也受浏览器自身的影响。感觉滑块不用html5表单做，而是用js结合css模拟一个，也许兼容问题就会好很多，抽空再折腾一下吧，欢迎各位读者提出修改建议。