未完成的颜色选择器

<!---->

<!---->

本来准备做一个比较好的颜色选择器，可是时间上不允许，所以只能暂时放这记录一下，以后有时间接着做。

<!---->

自定义颜色：

	红： 绿： 蓝：
#

<!---->

 

代码：

<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="隐藏更多颜色" onclick="$('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>	

 

分享到：

陷之死地而后生，投之亡地而后存。 | 颜色表中的RGB和HSV的转换公式[z]

• 2008-04-07 09:38
• 浏览 1092
• 评论(0)
• 查看更多