顏色選擇器
<HTML>
<HEAD>
<TITLE> 顏色拾取器 </TITLE>
<style>
body
{
margin:5px;
background-color:menu;
}
fieldset
{
padding:3px;
}
body,a,table,div,span,td,th,input,select
{
font:9pt;
font-family:Tahoma,Verdana, Arial, Helvetica, sans-serif;
}
</style>
<script language="javascript">
<!--
var Size=18;var Palette=new Array();
var SelectedColor=null;
function Init216Colors()
{
var RGB=new Array("00","33","66","99","cc","ff");
Palette=new Array();for(r=0;r<6;r++)
{
for(g=0;g<6;g++){for(b=0;b<6;b++){Palette[r*36+g*6+b]=new Array("#"+RGB[r]+RGB[g]+RGB[b],"#"+RGB[r]+RGB[g]+RGB[b]);};};};Palette[0][1]="black";Palette[5][1]="blue";Palette[30][1]="lime";Palette[35][1]="cyan";Palette[180][1]="red";Palette[185][1]="magenta";Palette[210][1]="yellow";Palette[215][1]="white";};
function CreatePalette()
{
var objPalette=document.createElement("span");with(objPalette.style){fontSize=0;pixelWidth=Size*16;pixelHeight=Math.ceil(Palette.length/Size)*16;};objPalette.attachEvent("oncontextmenu",function(){return false;});objPalette.attachEvent("ondragstart",function(){return false;});document.getElementById('Palette').insertAdjacentElement("beforeEnd",objPalette);var objColorButton=document.createElement("span");with(objColorButton.style){fontSize=0;pixelWidth=pixelHeight=18;padding="1px";border="1px solid buttonface";backgroundColor="buttonface";};var objColorBox=document.createElement("span");with(objColorBox.style){fontSize=0;pixelWidth=pixelHeight=14;border="1px solid buttonshadow";};for(var i=0;i<Palette.length;i++){objColorButton.onmousemove=function(){DoMouseMove(this)};objColorButton.onmouseout=function(){DoMouseOut(this)};objColorButton.onmousedown=function(){DoMouseDown(this)};objColorButton.onmouseup=function(){DoMouseUp(this)};objColorBox.style.backgroundColor=Palette[i][0];objColorBox.title=Palette[i][1];objColorButton.appendChild(objColorBox);objPalette.appendChild(objColorButton);objColorButton=objColorButton.cloneNode();objColorBox=objColorBox.cloneNode();};};function DoMouseMove(btn){if(btn!=SelectedColor&&event.button==0){UpHover(btn);}else{DownHover(btn);};};function DoMouseOut(btn){if(btn!=SelectedColor){UpOut(btn);}else{DownOut(btn);};};function DoMouseDown(btn){with(btn.style){DownHover(btn);};};function DoMouseUp(btn){if(btn!=SelectedColor){if(SelectedColor!=null)UpOut(SelectedColor);SelectedColor=btn;};OK();};function UpHover(btn){with(btn.style){borderTopColor=borderLeftColor="buttonhighlight";borderBottomColor=borderRightColor="buttonshadow";backgroundColor="buttonface";};};function DownHover(btn){with(btn.style){borderTopColor=borderLeftColor="buttonshadow";borderBottomColor=borderRightColor="buttonhighlight";backgroundColor="buttonface";};};function UpOut(btn){with(btn.style){borderColor=backgroundColor="buttonface";};};function DownOut(btn){with(btn.style){borderTopColor=borderLeftColor="buttonshadow";borderBottomColor=borderRightColor="buttonhighlight";backgroundColor="whitesmoke";};};
function OK()
{
var color=SelectedColor.firstChild.style.backgroundColor;
window.returnValue=color;
window.close();
};
function Cancel(){window.close();};function OKCustom(){var color=CustomColor.value;if(!CheckColor(color)){alert("顏色值不合法\r\n應(yīng)該類似如下形式 #FF8000 ");return;};window.returnValue=color;window.close();};function Clear(){var obj=window.dialogArguments;obj.value="";obj.nextSibling.style.backgroundColor='';window.close();};function Init(){Init216Colors();CreatePalette();};function CheckColor(str){var re=/^#[a-f0-9]{6}$/i;if(re.test(str)){return true;}else{return false;};};
//-->
</script>
</HEAD>
<BODY OnLoad="Init()" bgcolor=menu>
<fieldset>
<legend>216安全色</legend>
<table align="center" border=0 cellspacing=0 cellpadding=0 style="font-size:12px;" onselectstart="return false;">
<tr>
<td align='left' id='Palette'></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>自定義顏色</legend>
<table width="100%" align="center" border=0 cellspacing=0 cellpadding=0>
<tr><td align="center"><input id="CustomColor" type="text" size="10" value="" maxlength="7"> <input id="OKCustom" type="button" onClick="OKCustom()" value="確定"></input></td>
</tr>
</table>
</fieldset>
<table width="100%" border="0" cellspacing="0" cellpadding="5" align="center">
<tr>
<td align="center"><input type="button" value="清空" style="width:80px" onClick="Clear()"></td>
<td align="center"><input type="button" value="取消" style="width:80px" onClick="Cancel()"></td>
</tr>
</table>
</BODY>
</HTML>
文章來源:
http://www.cnblogs.com/wangdetian168/archive/2008/09/18/1293474.html
posted on 2010-09-29 13:28
sanmao 閱讀(253)
評(píng)論(0) 編輯 收藏