简单而实用的javascript颜色选择器

做网站时,很多地方都会用到颜色选择器,下面是一个简单而实用的javascript颜色选择器,希望对你有帮助!

xml 代码
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>js颜色选择器</title>
  6. </head>
  7.  
  8. <BODY>
  9. <script language="javascript">
  10. document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" width=\"0px\" height=\"0px\"></OBJECT>");
  11. var ocolorPopup = window.createPopup();
  12. var ecolorPopup=null;
  13.  
  14. function colordialogmouseout(obj){
  15.   obj.style.borderColor="";
  16.   obj.bgColor="";
  17. }
  18.  
  19. function colordialogmouseover(obj){
  20.   obj.style.borderColor="#0A66EE";
  21.   obj.bgColor="#EEEEEE";
  22. }
  23.  
  24. function colordialogmousedown(color){
  25.   ecolorPopup.value=color;
  26.   //document.body.bgColor=color;
  27.   ocolorPopup.document.body.blur();
  28. }
  29.  
  30. function colordialogmore(){
  31.   var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value);
  32.   sColorsColor = sColor.toString(16);
  33.   if (sColor.length < 6) {
  34. var sTempString = "000000".substring(0,6-sColor.length);

  35. sColor = sTempString.concat(sColor);

  36.   }
  37.   ecolorPopup.value="#"+sColor.toUpperCase();
  38.   //document.body.bgColor="#"+sColor.toUpperCase();
  39.   ocolorPopup.document.body.blur();
  40. }
  41.  
  42. function colordialog(){
  43.   var e=event.srcElement;
  44.   e.onkeyup=colordialog;
  45.   eecolorPopup=e;
  46.   var ocbody;
  47.   var oPopBody = ocolorPopup.document.body;
  48.   var colorlist=new Array(40);
  49.   oPopBody.style.backgroundColor = "#f9f8f7";
  50.   oPopBody.style.border = "solid #999999 1px";
  51.   oPopBody.style.fontSize = "12px";
  52.  
  53.   colorlist[0]="#000000"; colorlist[1]="#993300"; colorlist[2]="#333300"; colorlist[3]="#003300";
  54.   colorlist[4]="#003366"; colorlist[5]="#000080"; colorlist[6]="#333399"; colorlist[7]="#333333";
  55.   colorlist[8]="#800000"; colorlist[9]="#FF6600"; colorlist[10]="
    #808000";colorlist[11]=
    "#008000";
  56.   colorlist[12]="#008080";colorlist[13]="#0000FF";colorlist[14]="#666699";colorlist[15]="#808080";
  57.   colorlist[16]="#FF0000";colorlist[17]="#FF9900";colorlist[18]="#99CC00";colorlist[19]="#339966";
  58.   colorlist[20]="#33CCCC";colorlist[21]="#3366FF";colorlist[22]="#800080";colorlist[23]="#999999";
  59.   colorlist[24]="#FF00FF";colorlist[25]="#FFCC00";colorlist[26]="#FFFF00";colorlist[27]="#00FF00";
  60.   colorlist[28]="#00FFFF";colorlist[29]="#00CCFF";colorlist[30]="#993366";colorlist[31]="#CCCCCC";
  61.   colorlist[32]="#FF99CC";colorlist[33]="#FFCC99";colorlist[34]="#FFFF99";colorlist[35]="#CCFFCC";
  62.   colorlist[36]="#CCFFFF";colorlist[37]="#99CCFF";colorlist[38]="#CC99FF";colorlist[39]="#FFFFFF";
  63.  
  64.   ocbody = "";
  65.   ocbody += "<table CELLPADDING=0 CELLSPACING=3>";
  66.   ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+e.value+"\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">当前颜色</td></tr>";
  67.   for(var i=0;i<colorlist.length;i++){
  68. if(i%8==0)

  69.   ocbody += "<tr>";

  70. ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid;\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" onMouseDown=\"parent.colordialogmousedown('"+colorlist[i]+"')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+colorlist[i]+"\"><tr><td></td></tr></table></td>";

  71. if(i%8==7)

  72.   ocbody += "</tr>";

  73.   }
  74.   ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" style=\"border:1px solid;font-size:12px;cursor:default;\" onMouseDown=\"parent.colordialogmore()\">其它颜色...</td></tr>";
  75.   ocbody += "</table>";
  76.  
  77.   oPopBody.innerHTML=ocbody;
  78.   ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body);
  79. }
  80. //-->
  81. </script>
  82.  
  83. 选择颜色:<input name="sel1" type="text" onfocus="colordialog()" />
  84. </BODY>
  85. </HTML>