本文实例讲述了JS实现的系统调色板。分享给大家供大家参考，具体如下：

运行效果图如下：

整体页面代码：

DW调色板

var ColorHex=new Array('00','33','66','99','CC','FF')

var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')

var current=null

function getEvent()

{

if(document.all)

{

return window.event;//如果是ie

}

func=getEvent.caller;

while(func!=null)

{

var arg0=func.arguments[0];

if(arg0)

{

if((arg0.constructor==Event || arg0.constructor ==MouseEvent)||(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))

{

return arg0;

}

}

func=func.caller;

}

return null;

}

function intocolor()

{

var colorTable=''

for (i=0;i<2;i++) //循环2部分

{

for (j=0;j<6;j++) //循环6行

{

colorTable=colorTable+'

'

for (k=0;k<3;k++)

{

for (l=0;l<6;l++)

{

colorTable=colorTable+'

'

}

}

}

}

colorTable='

+'

'

+'

+'

当前色:'

+'

'

+'

+colorTable+'

';

colorpanel.innerHTML=colorTable

}

function doOver() {

var evt=getEvent();

var element=evt.srcElement || evt.target;

var DisColor=document.getElementById("DisColor");

var HexColor=document.getElementById("HexColor");

if ((element.tagName=="TD") && (current!=element)) {

if (current!=null){

current.style.backgroundColor = current._background

}

element._background = element.style.backgroundColor

DisColor.style.backgroundColor = rgbToHex(element.style.backgroundColor)

HexColor.value = rgbToHex(element.style.backgroundColor)

element.style.backgroundColor = "white"

current = element

}

}

function rgbToHex(aa)

{

if(aa.indexOf("rgb") != -1)

{

aa=aa.replace("rgb(","")

aa=aa.replace(")","")

aa=aa.split(",")

r=parseInt(aa[0]);

g=parseInt(aa[1]);

b=parseInt(aa[2]);

r = r.toString(16);

if (r.length == 1) { r = '0' + r; }

g = g.toString(16);

if (g.length == 1) { g = '0' + g; }

b = b.toString(16);

if (b.length == 1) { b = '0' + b; }

return ("#" + r + g + b).toUpperCase();

}

else

{

return aa;

}

}

function doOut() {

if (current!=null) current.style.backgroundColor = current._background;

}

function doclick(){

var evt=getEvent();

var element=evt.srcElement || evt.target;

if (element.tagName=="TD"){

var bg=rgbToHex(element._background);

document.getElementById("orange").value=bg;

alert("选取颜色: "+bg);

return bg;

}

}

所选色:

PS：这里再为大家推荐几款本站的相关在线工具：

在线RGB、HEX颜色代码生成器：http://tools.ddpool.cn/color/rgb_color_generator

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全：http://tools.ddpool.cn/color/jPicker

在线网页调色板工具：http://tools.ddpool.cn/color/color_picker

在线颜色选择器工具/RGB颜色查询对照表：http://tools.ddpool.cn/color/colorpicker

希望本文所述对大家JavaScript程序设计有所帮助。