查看文章
顏色查詢 顏色代碼大全 網(wǎng)頁版顏色代碼選擇器
2011-03-12 1:19
這是一款網(wǎng)頁版顏色代碼選擇器程序代碼。您將代碼復制、粘貼到記事本上，文件保存名稱為“顏色代碼選擇器.html”即可。這款選擇器小巧玲瓏，可以查到各種顏色代碼，因為是一張網(wǎng)頁，所以不用安裝，放在桌面或任務欄上即開即用，得心應手。您可以免去煩惱，不再需要去網(wǎng)站查詢顏色代碼了。
查看效果圖<!--代碼開始-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0022)http://blog.csdn.net/electroniXtar/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>網(wǎng)頁版顏色代碼選擇器</title>
</head>
<STYLE type=text/css>
TD {
FONT-SIZE: 10.8pt
}
BODY {
FONT-SIZE: 10.8pt;
background-color: #E6E6FF;
}
BUTTON {
WIDTH: 5em
}
.STYLE2 {
font-family: "宋體";
font-size: 14pt;
font-weight: bold;
color: #FF0000;
}
</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>
</HEAD>
<body>
<BODY width="400" border="10" text=#000000 link=#000000 leftMargin=0 topMargin=0 bgProperties=fixed>
<br>
<table width="350" border="0" align="center" cellpadding="10">
<tr>
<td><div align="center" class="STYLE2" >網(wǎng)頁版顏色代碼選擇器</div></td>
</tr>
</table>
<TABLE width=350
border=2 align=center cellPadding=3 cellSpacing=1 bordercolor="#5E5E5E" bgColor=#dddddd>
<TBODY>
<TR bgColor=#ffffff>
<TD align=middle width="10%"><SELECT onchange=selectchg(this.value)
name=select1> <OPTION value=1 selected>紅</OPTION> <OPTION
value=2>綠</OPTION> <OPTION value=3>藍</OPTION> <OPTION
value=4>灰</OPTION></SELECT> </TD>
<TD align=middle width="90%">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="81%" align=right>顏色值
<INPUT class=memo size=10 name=text1>
<INPUT class=button onclick=choosecolor() type=button value="確認顏色" name=Button2>
</TD>
<TD align=right width="1%"> </TD>
<TD width="18%">
<TABLE class=cursorcross height=20 cellSpacing=1 cellPadding=0
width=40 border=0>
<TBODY>
<TR>
<TD id=customcolor onmouseover=showcolor(this)
bgColor=#ffffff> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR>
<TR bgColor=#ffffff>
<TD align=middle width="10%">
<TABLE class=cursorhand id=tableleft cellSpacing=1 cellPadding=0
border=0><SCRIPT language=VBScript>
function hexit(which)
hexit=hex(which)
end function
</SCRIPT>
<SCRIPT language=JavaScript>
for(i=0;i<=15;++i)
{document.write('<tr><td align="center">'+ hexit(0+i*17) +'</td><td id="tdleft' + i +'" bgcolor="rgb('+ (0+i*17) + ',0,0)" width="15" height="15" onclick="changeright(this.num)" onmouseover="showcolor(this)"></td></tr>')
document.all['tdleft' + i].num=i
}
</SCRIPT>
<TBODY></TBODY></TABLE></TD>
<TD align=middle width="90%">
<TABLE class=cursorcross id=tableleft cellSpacing=1 cellPadding=0
border=0>
<SCRIPT language=JavaScript>
document.write('<tr><td></td>')
for(i=0;i<=15;++i)
{document.write('<td align="center">'+ hexit(0+i*17) +'</td>')}
document.write('</tr>')
for(i=0;i<=15;++i)
{document.write('<tr>')
document.write('<td align="center">'+ hexit(0+i*17) +'</td>')
for(j=0;j<=15;++j)
{document.write('<td id="tdrightr' + i + 'c' + j +'" bgcolor="rgb(0,'+ (0+i*17) + ',' + (0+j*17) + ')" width="15" height="15" onmouseover="showcolor(this)" onclick="clickright(this)"></td>')}
document.write('</tr>')
}
</SCRIPT>
<TBODY></TBODY></TABLE></TD></TR>
<TR bgColor=#ffffff>
<TD colSpan=2
height=20>⑴可選16×16×16種顏色。⑵點擊左邊的顏色會得到更多顏色。⑶點擊右邊的顏色會固定選取的顏色。⑷輸入框可以自定義顏色。（蘇揚耕夫修改制作）</TD>
</TR></TBODY></TABLE>
<p><SCRIPT language=JavaScript>
function selectchg(which)
{switch(which)
{case '1' :leftR();break;
case '2' :leftG();break;
case '3' :leftB();break;
case '4' :leftA();break;
}
}
function leftR()
{for(i=0;i<=15;++i)
{document.all['tdleft'+i].bgColor='rgb('+ (0+i*17) + ',0,0)'}
rightR(0)
}
function leftG()
{for(i=0;i<=15;++i)
{document.all['tdleft'+i].bgColor='rgb(0,'+ (0+i*17) + ',0)'}
rightG(0)
}
function leftB()
{for(i=0;i<=15;++i)
{document.all['tdleft'+i].bgColor='rgb(0,0,'+ (0+i*17) + ')'}
rightB(0)
}
function leftA()
{for(i=0;i<=15;++i)
{document.all['tdleft'+i].bgColor='rgb('+ (0+i*17) + ','+ (0+i*17) + ','+ (0+i*17) + ')'}
rightA()
}
function rightR(which)
{for(i=0;i<=15;++i)
{for(j=0;j<=15;++j)
{document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+which*17) + ',' + (0+i*17) + ','+ (0+j*17) + ')'}
}
}
function rightG(which)
{for(i=0;i<=15;++i)
{for(j=0;j<=15;++j)
{document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*17) + ',' + (0+which*17) + ',' + (0+j*17) + ')'}
}
}
function rightB(which)
{for(i=0;i<=15;++i)
{for(j=0;j<=15;++j)
{document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*17) + ','+ (0+j*17)+ ',' + (0+which*17) + ')'}
}
}
function rightA()
{for(i=0;i<=15;++i)
{for(j=0;j<=15;++j)
{document.all['tdrightr' + i + 'c' + j].bgColor='rgb(' + (0+i*16+j) + ','+ (0+i*16+j)+ ',' + (0+i*16+j) + ')'}
}
}
var rightclicked=false
function clickright(which)
{if(rightclicked){rightclicked=false;showcolor(which)}else{rightclicked=true}
}
function changeright(which)
{switch(select1.value)
{case '1' :rightR(which);break;
case '2' :rightG(which);break;
case '3' :rightB(which);break;
}
}
function showcolor(which)
{if(rightclicked)return;
text1.value=which.bgColor
choosecolor()
}
function choosecolor()
{customcolor.bgColor=text1.value
}
</SCRIPT>
</p>
</BODY></HTML>
<!--代碼結(jié)束-->
怎樣保存和使用html 代碼，請參考這里的1至9 ＞＞
