JS实现仿PS的调色板效果完整实例

本文实例讲述了JS实现仿PS的调色板效果。分享给大家供大家参考，具体如下：
运行效果图如下：

完整实例代码：

<html><head><style>#colorpad table{border-collapse:collapse;cellpadding:0;cellspacing:0;width:255px;height:255px;border:0;}#colorpadright table{border-collapse:collapse;cellpadding:0;cellspacing:0;width:255px;height:20px;border:0;}#colorpad{width:255px;height:255px;}#colorpadsample{width:100px;height:100px;}#colorpadright{height:20px;width:255px;}td{border:0;width:1px;height:1px;margin:0;padding:0}</style></head><div id="colorpad"></div><div id="colorpadright"></div><div id="colorpadsample"></div></html><script>function setColor（style）{document.getElementById（"colorpadsample"）.style.background=style;var stylestylepiect1=style.split（","）[0];var stylestylepiect2=style.split（","）[2];var html="";var style="";html+="<table cellpadding=0 cellspace=0>";html+="<tr>";for（var i=0;i<256;i++）{style= stylepiect1+","+i+","+stylepiect2;html+="<td style="background:"+style+"">";html+="</td>";}html+="</tr>"; html+="</table>"; document.getElementById（"colorpadright"）.innerHTML=html;}var html="";html+="<table cellpadding=0 cellspace=0>";for（var i=0;i<256;i++）{html+="<tr>";for（var j=0;j<256;j++）{html+="<td onclick="setColor（this.style.background）" style="background:rgb（"+i+",0,"+j+"）;">";html+="</td>";} html+="</tr>";}html+="</table>";document.getElementById（"colorpad"）.innerHTML=html;</script>

时间仓促，用css的背景样式，js打印255*255的调色板，只写了RB固定 G变的部分，由于所有颜色展现对浏览器负载比较大，所以不推荐使用类似的调色板。
PS：这里再为大家推荐几款本站的相关在线工具：
在线RGB、HEX颜色代码生成器：
http://tools.jb51.net/color/rgb_color_generator
RGB颜色查询对照表_颜色代码表_颜色的英文名称大全：
http://tools.jb51.net/color/jPicker
在线网页调色板工具：
http://tools.jb51.net/color/color_picker
在线颜色选择器工具/RGB颜色查询对照表：
http://tools.jb51.net/color/colorpicker
更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。