代码:
<table border=0 cellpadding=0 cellspacing=2 style="background:#f9f9f9;">
<tr>
<td id=cp_con_l>
<SCRIPT language=JavaScript>
var cnum = [1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0];
function toHex(num) {num = Math.round(num);if(num > 255) {return "ff";} else if(num < 16) {return "0" + num.toString(16);}return num.toString(16);}
function wc(r, g, b, n) {r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15;return '#' + toHex(r) + toHex(g) + toHex(b);}
function DoColor(c, l){ var r, g, b;
r = '0x' + c.substring(1, 3);
g = '0x' + c.substring(3, 5);
b = '0x' + c.substring(5, 7);
if(l > 120)
{
l = l - 120;
r = (r * (120 - l) + 255 * l) / 120;
g = (g * (120 - l) + 255 * l) / 120;
b = (b * (120 - l) + 255 * l) / 120;
}else
{
r = (r * l) / 120;
g = (g * l) / 120;
b = (b * l) / 120;
}
return '#' + ToHex(r) + ToHex(g) + ToHex(b);
}
function geneHSColorArr() {
var n1,n2,n3,sb = [];
for(var i = 0; i < 16; i ++){
for(var j = 0; j < 30; j ++) {
n1 = j % 5;n2 = Math.floor(j / 5) * 3;n3 = n2 + 3;
sb.unshift(wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),(cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),(cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i));
}
}
return sb;
}
function geneVColorArr() {
var sb = [];
for(i = 255; i >= 0; i -= 8.5) {
sb.push('#' + ToHex(i) + ToHex(i) + ToHex(i));
}
return sb;
}
var colorArr = geneHSColorArr();
document.write('<div style="clear:both;width:240px;border:1px inset;">');
for(var i = colorArr.length - 1; i >= 0; i--) {
document.write('<div style="display:block;float:left;width:7px;height:9px;margin-right:1px;margin-bottom:1px;background:' + colorArr[i] + '"> </div>');
}
document.write('</div>');
</SCRIPT>
<table border=0 cellpadding=0 cellspacing=2 style="background:#fff;">
<tr>
<SCRIPT language=JavaScript>
for(i = 255; i >= 0; i -= 8.5) {
document.write('<TD BGCOLOR=#' + toHex(i) + toHex(i) + toHex(i) + ' TITLE=' + Math.floor(i * 16 / 17) + ' height=20 width=6 ></TD>');
}
</SCRIPT>
</tr>
</table>
<input style="width:100%;" value="添加到自定义颜色" type=button /><br/>
<input style="width:100%;" value="隐藏更多颜色" οnclick="$('cp_con_l').style.display='none';" type=button /><br/>
</td>
<td id=cp_con_r valign=top style="width:200px;padding:4px;">
自定义颜色:
<div id=cp_b_con style="clear:both;padding:6px;">
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#ff0;"></div>
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#f60;"></div>
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#fff;"></div>
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#fff;"></div>
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#ff0;"></div>
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#f60;"></div>
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#fff;"></div>
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#fff;"></div>
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#ff0;"></div>
<div style="display:block;float:left;margin:2px;width:30px;height:24px;border:2px inset;background:#fc0;"></div>
</div>
<div style="clear:both;padding:6px;">
<table border=0 width=100% cellpadding=0 cellspacing=0>
<tr>
<td><div id="colorBlock" style="background:#526666;width:72px;height:32px;display:block;"> </div></td>
<td rowspan=2>红:<input type="text" style="width:30px;"/><br/>绿:<input type="text" style="width:30px;"/><br/>蓝:<input type="text" style="width:30px;"/><br/></td>
</tr>
<tr>
<td>#<input type="text" style="width:60px;margin-left:4px;"/></td>
</tr>
</table>
</div>
<!-- 操作区 -->
<div style="clear:both;">
<div id=cp_b_op>
<input type=button value="确定" /> <input type=button value="取消" />
</div>
</div>
</td>
</tr>
</table>