一个颜色面板（JS+CSS）

前一段时间需要一个颜色面板，在Google找了很久没有合适的，最后自己花了半天时间写了一个自己的颜色面板，现在把代码贴出来，呵呵

 

yecol--颜色面板
<style type="text/css">
<!--
.tbcolorinput {
 color: #FFF;
 background-color: #000;
 clear: both;
 float: left;
 height: 20px;
 width: 100px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 14px;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
}
#tbimg {
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
}
#yecolcolordiv {
 background-color: #FFF;
 clear: both;
 float: left;
 width: auto;
 overflow: visible;
 z-index: 777;
 width:260px;
 height:154px;
 visibility:hidden;
}
#yecolcolordiv #yecolcolortitle {
 background-color: #999;
 clear: both;
 float: left;
 height: 20px;
 width: 260px;
 overflow: hidden;
 position: absolute;
 z-index: auto;
 cursor: auto;
 margin-left:-260px;
 margin-top:0px;
}
#yecolcolordiv #yecolcolortitle #yecolcorclose {
 background-color: #FFF;
 padding: 0px;
 clear: both;
 float: right;
 height: 13px;
 width: 13px;
 margin-top: -18px;
 margin-right: 2px;
 margin-bottom: 0px;
 margin-left: 210px;
 text-align:center;
}
#yecolcolordiv #yecolcolorcontext {
 background-color: #FFF;
 padding: 0px;
 clear: both;
 float: left;
 height: 274px;
 width: 260px;
 margin-top: 13px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 1px;
 z-index: 777;
 text-align:left;
 cursor:pointer;
}
#yecolcolordiv #yecolcolorbutton {
 clear: both;
 float: left;
 height: 15px;
 width: 260px;
 margin-left:1px;
 z-index: 777;
 overflow: hidden;
 background-color: #CCC;
}
#yecolcolordiv .item
{
 width:15px;
 height:15px;
 padding:0px;
 border:0px;
 margin-left:
 border-bottom-color:#000;
 display:block;
 clear:both;
 border:2px solid #FFF;
}
-->
</style>
<script language="javascript1.5" type="text/javascript">
var isvisble = true;
var theContorlObj = null;
function openyecol(event,id)
{
 //alert(isvisble);
 theContorlObj = id;
 if(isvisble)
 {
  var dd = document.getElementById("yecolcolordiv" );
  //mouse(event);
  event = event || window.event;
  var mousepos = mouseCoords(event);
  //alert(mousepos.x);
  if(!dd.style.left||!dd.style.top)
       {
         dd.style.left = 20;
          dd.style.top = 10;
       }
  var leftedge    = document.body.clientWidth;
     var bottomedge  = document.body.clientHeight;
     //alert(leftedge);
     //alert(bottomedge);
  //if(leftedge<mousepos.x)
  //{
   dd.style.left=mousepos.x+'px';
  //}
  //else
  //{
  // dd.style.left = leftedge-mousepos.x+'px';
  //}
  //if(bottomedge<mousepos.y)
  //{
   dd.style.top= mousepos.y;
  //}
  //else
  //{
  // dd.style.top =bottomedge+mousepos.y +'px';
  //}
  dd.style.visibility = "visible";
  isvisble= false;
     //alert(isvisble+"1");
 }
 else
 {
  var dd = document.getElementById("yecolcolordiv" );
  dd.style.visibility = "hidden"
  isvisble= true;
   //alert(isvisble+"2");
 }
 //alert(isvisble);
 //var theselectcolor = document.getElementById("theselectcolor");
 //id.style.backgroundColor=theselectcolor.value;
 //if(
 
}

function mouse(evt)
{
 evt = evt|| window.event;
 var mousepos = mouseCoords(evt);
 var dd = document.getElementById("yecol");
 dd.value = mousepos.x+":";
 dd.value += mousepos.y;
}

function mouseCoords(ev){
 if(ev.pageX||ev.pageY){return {x:ev.pageX, y:ev.pageY};}
 return {x:ev.clientX + document.body.scrollLeft-document.body.clientLeft,y:ev.clientY + document.body.scrollTop-document.body.clientTop}
}

function closeyecol()
{
 if(!isvisble)
 {
  var dd = document.getElementById("yecolcolordiv" );
  dd.style.visibility = "hidden"
  isvisble= true;
 }
}

function m(evt)
{
 
}
function addcoloritem(pid)
{
 
 var R = G = B = ["3","C","9","6","F","0"];
 var coloritems= "<div id='ss' style='margin-left:7px;margin-top:30px;'>";
 var i = 0;
 var k = 0;
 for(r in R)
 {
  var _R = R[r]+R[r];
  for(g in G)
  {
   var _G = G[g]+G[g];
   for(b in B)
   {
    var _B = B[b]+B[b];
    var color = _R+_G+_B;
    if(i==13)
    {
     coloritems +="<br/>";
     i= 0;
    }
    var j = i*19;
    //if(i==0)
    //{
    // k = 0;
    //}
    //else
    //{
    // k = -12;
    //}
    if(i ==0)
    {
     k=-20;
    }
    else
    {
     k=-19;
    }
    coloritems +="<div class='item' id='"+color+"' οnclick=selectcolor(/'"+color+"/') style='background-color:#"+color+";margin-left:"+j+"px;margin-top:"+k+"px;'></div> "
    i++;
   }
  }
 }
 coloritems +="<div style='width:30px;heigth:21px;margin-left:153px;margin-top:-17px;font-size:12px;background-color:#FFFFFF'>颜色</div><input id='theselectcolor' type='text' style='width:55px;heigth:15px;margin-left:183px;margin-top:-17px;font-size:12px;' /></div>"
 var dd = document.getElementById("yecolcolorcontext");
 dd.innerHTML = coloritems;
}
function selectcolor(id)
{
 //alert(id);
 var textbox = document.getElementById("theselectcolor");
 textbox.style.backgroundColor="#"+id;
 textbox.value = "#"+id;
 closeyecol();
 theContorlObj.value="#"+id;
 alert("#"+id);
}
</script>
</head>
<body οnlοad="addcoloritem('yecolcolorcontext')">
<div style="width:400px; height:400px; background-color:#960" οnclick="openyecol(event,this)"></div>
<!-- οnlοad="addcoloritem()" -->
<div id='yecolcolordiv' style='position:absolute'>
<div id="yecolcolortitle">yecol颜色板
<div id="yecolcorclose" οnclick="closeyecol()">X</div>
</div>
<div id='yecolcolorcontext'></div>
</div>
<input id='yecol' type="text" value='#FFFFFF' οnclick="openyecol(event,this)" />