js色彩选择如何实现
js色彩选择如何实现
[解决办法]
- HTML code
<HTML><HEAD><TITLE>颜色</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE type=text/css>TD { FONT-SIZE: 10.8pt}BODY { FONT-SIZE: 10.8pt}BUTTON { WIDTH: 5em}</STYLE><SCRIPT language=JavaScript>var SelRGB = '';var DrRGB = '';var SelGRAY = '120';var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');function ToHex(n){ var h, l; n = Math.round(n); l = n % 16; h = Math.floor((n / 16)) % 16; return (hexch[h] + hexch[l]);}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 EndColor(){ var i; if(DrRGB != SelRGB) { DrRGB = SelRGB; for(i = 0; i <= 30; i ++) GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8); } SelColor.value = DoColor(RGB.innerText, GRAY.innerText); ShowColor.bgColor = SelColor.value;}</SCRIPT><SCRIPT language=JavaScript event=onclick for=ColorTable> SelRGB = event.srcElement.bgColor; EndColor();</SCRIPT><SCRIPT language=JavaScript event=onmouseover for=ColorTable> RGB.innerText = event.srcElement.bgColor; EndColor();</SCRIPT><SCRIPT language=JavaScript event=onmouseout for=ColorTable> RGB.innerText = SelRGB; EndColor();</SCRIPT><SCRIPT language=JavaScript event=onclick for=GrayTable> SelGRAY = event.srcElement.title; EndColor();</SCRIPT><SCRIPT language=JavaScript event=onmouseover for=GrayTable> GRAY.innerText = event.srcElement.title; EndColor();</SCRIPT><SCRIPT language=JavaScript event=onmouseout for=GrayTable> GRAY.innerText = SelGRAY; EndColor();</SCRIPT><SCRIPT language=JavaScript event=onclick for=Ok> window.returnValue = SelColor.value; window.close();</SCRIPT><META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD><BODY bgColor=menu><DIV align=center><CENTER><TABLE cellSpacing=10 cellPadding=0 border=0> <TBODY> <TR> <TD> <TABLE id=ColorTable style="CURSOR: hand" cellSpacing=0 cellPadding=0 border=0> <SCRIPT language=JavaScript>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; document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');}var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0); for(i = 0; i < 16; i ++) { document.write('<TR>'); for(j = 0; j < 30; j ++) { n1 = j % 5; n2 = Math.floor(j / 5) * 3; n3 = n2 + 3; 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); } document.writeln('</TR>'); }</SCRIPT> <TBODY></TBODY></TABLE></TD> <TD> <TABLE id=GrayTable style="CURSOR: hand" cellSpacing=0 cellPadding=0 border=0> <SCRIPT language=JavaScript> for(i = 255; i >= 0; i -= 8.5) document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>');</SCRIPT> <TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV><DIV align=center><CENTER><TABLE cellSpacing=10 cellPadding=0 border=0> <TBODY> <TR> <TD align=middle rowSpan=2>选中色彩 <TABLE id=ShowColor height=30 cellSpacing=0 cellPadding=0 width=40 border=1> <TBODY> <TR> <TD></TD></TR></TBODY></TABLE></TD> <TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR>亮度: <SPAN id=GRAY>120</SPAN><BR>代码: <INPUT id=SelColor size=7></TD> <TD><BUTTON id=Ok type=submit>确定</BUTTON></TD></TR> <TR> <TD><BUTTON onclick=window.close();>取消</BUTTON></TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>
[解决办法]
- HTML code
<html> <head> <title> 在网页上实现颜色框的选取 </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <SCRIPT> var sInitColor = null; function callColorDlg(){ if (sInitColor == null) //display color dialog box var sColor = dlgHelper.ChooseColorDlg(); else var sColor = dlgHelper.ChooseColorDlg(sInitColor); //change decimal to hex sColor = sColor.toString(16); if (sColor.length < 6) { var sTempString = "000000".substring(0,6-sColor.length); sColor = sTempString.concat(sColor); } alert("你选的颜色是： #"+sColor) document.body.style.background = "#" +sColor; } </SCRIPT> </head> <body> <BUTTON ID="ofntColor" TITLE="选择颜色" onclick="callColorDlg()"> 选择颜色 </BUTTON> <OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"> </OBJECT> </body> </html>