支持IE、FF纯js 颜色选择器代码,JS代码库,德仔网

代码语言
代码分类
【JS】支持IE、FF纯js 颜色选择器
作者:李敬塔 / 发布于2012/12/5/ 799
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>ColorSelect</title>

<script language=javascript>

function $(d){return document.getElementById(d);}

var IE=navigator.appName=="Microsoft Internet Explorer";

var ColorHex=new Array('00','33','66','99','CC','FF')

var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')

var current=null

function intocolor()

{

var colorTable=''

for (i=0;i<2;i++)

{

   for (j=0;j<6;j++)

   {

    colorTable=colorTable+'<tr height=12>'

    colorTable=colorTable+'<td width=11 style="cursor:pointer;background-color:#000000">'

    if (i==0)

    {

     colorTable=colorTable+'<td width=11 style="cursor:pointer;background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'

    }

    else

    {

     colorTable=colorTable+'<td width=11 style="cursor:pointer;background-color:#'+SpColorHex[j]+'">'

    }

    colorTable=colorTable+'<td width=11 style="cursor:pointer;background-color:#000000">'

    for (k=0;k<3;k++)

    {

     for (l=0;l<6;l++)

     {

      colorTable=colorTable+'<td width=11 style="cursor:pointer;background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'

     }

    }

   }

}

colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="#000000">'

      +'<tr height=30>'

      +'<td colspan=21 bgcolor=#cccccc>'

      +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'

      +'<tr>'

      +'<td width="3" style="padding-left:2px;"><input type="text" name="DisColor" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#000000;"></td>'

      +'<td width="3" style="padding-left:2px;"><input type="text" name="HexColor" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td>'

   +'<td id="ColorDia" style="padding-left:2px;"><a href="javascript:colordialogmore();">More...</a></td></tr></table></td></table>'

      +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#000000" style="cursor:pointer;" id="selectColor">'

      +colorTable+'</table>';

colorpanel.innerHTML=colorTable

}

/**

* firefox

*/

function rgbToHex(aa)

{

if(aa.indexOf("rgb") != -1)

{

   aa=aa.replace("rgb(","")

   aa=aa.replace(")","")

   aa=aa.split(",")

   r=parseInt(aa[0]);

   g=parseInt(aa[1]);

   b=parseInt(aa[2]);

   r = r.toString(16);

   if (r.length == 1) { r = '0' + r; }

   g = g.toString(16);

   if (g.length == 1) { g = '0' + g; }

   b = b.toString(16);

   if (b.length == 1) { b = '0' + b; }

   return ("#" + r + g + b).toUpperCase();

}

else

{

   return aa;

}

}

/**

*

*/

function doOver(obj, DisColor, HexColor)

{

var tdList = document.getElementsByTagName("td");

for(var i = 0; i < tdList.length; i++){

/*****************************************/

/*****************************************/

var tempinput=tdList.getElementsByTagName("INPUT");

if((tempinput[0]!=null && typeof(tempinput[0]) !="undefined"

  && (tempinput[0].id=="DisColor" || tempinput[0].id=="HexColor"))

  || (tdList.id!=null && typeof(tdList.id)!="undefined" && tdList.id=="ColorDia")){

   continue;//如果是标题拦td的话，不加事件．

}

/*****************************************/

/*****************************************/

   var temp = "";

   tdList.onmouseover = function()   //

   {

    temp = rgbToHex(this.style.backgroundColor);

    //DisColor.style.backgroundColor = temp;

   // HexColor.value = temp;

   // this.style.backgroundColor = "#FFFFFF";

    this.onmouseout = function()   //

    {

// this.style.border="1px solid #000000";

     //this.style.backgroundColor = temp;

    }

    this.onclick = function (){ //alert(temp);

  DisColor.style.backgroundColor = temp;

        HexColor.value = temp;

  } //

   }

}

}

/**

*

*/

window.onload = function()

{

intocolor();

var table = document.getElementById("selectColor");

var DisColor = document.getElementById("DisColor");

var HexColor = document.getElementById("HexColor");

table.onmouseover = function()

{

   doOver(table, DisColor, HexColor);

}

}

</script>

</head>

<body>

<script language="javascript">

//<![CDATA[

/************************************

***********************************/  

//只支持IE

document.write("<OBJECT   id=\"dlgHelper\"   CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\"   width=\"0px\"   height=\"0px\"></OBJECT>");

var   ocolorPopup = window.createPopup();

function  colordialogmore(){ if(!IE){alert("^_^您的浏览器不支持系统颜色控件！");return;}

      var   sColor=dlgHelper.ChooseColorDlg($("HexColor").value);  

      sColor   =   sColor.toString(16);  

      if   (sColor.length   <   6)   {  

          var   sTempString   =   "000000".substring(0,6-sColor.length);  

          sColor   =   sTempString.concat(sColor);  

      }  

      $("HexColor").value="#"+sColor.toUpperCase();  

   $("DisColor").style.backgroundColor="#"+sColor.toUpperCase();  

      //document.body.bgColor="#"+sColor.toUpperCase();  

      ocolorPopup.document.body.blur();  

  } //这段代码只支持IE  

/***************************************

***************************************/

//]]>

</script>

<div id="colorpanel" style="position:absolute;"></div>

</body>

</html>
试试其它关键字
　颜色选择器　
同语言下
可能有用的
李敬塔贡献的其它代码(13)