js颜色选择器代码[firefox不支持]

更新时间：2008年11月08日 10:05:10 作者：

非常不错的，颜色选择效果代码

最简单的，在body区域加入：

<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0"></OBJECT> 

调用的JS：

复制代码代码如下:

<script type="text/javascript"> 
var tempColor = "0099cc"; 
function picColor(){ 
var Hcolor = document.getElementById("dlgHelper").ChooseColorDlg(tempColor).toString(16); 
//with(event.srcElement){ 
//value = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor; 
//style.backgroundColor = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor; 
var newColor = ((Hcolor.length<6)?"000000".substring(0,6-Hcolor.length):"") + Hcolor; 
if(newColor.toString().substring(0,1) != "#"){ 
newColor = "#" + newColor; 
} 
alert(newColor); 
} 
// tempColor = Hcolor; 
// window.alert(tempColor); 
//} 

</script>

或者直接使用这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>颜色选择器</title> </head> <BODY> <script language="javascript"> document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" width=\"0px\" height=\"0px\"></OBJECT>"); var ocolorPopup = window.createPopup(); var ecolorPopup=null; function colordialogmouseout(obj){ obj.style.borderColor=""; obj.bgColor=""; } function colordialogmouseover(obj){ obj.style.borderColor="#0A66EE"; obj.bgColor="#EEEEEE"; } function colordialogmousedown(color){ ecolorPopup.value=color; //document.body.bgColor=color; ocolorPopup.document.body.blur(); } function colordialogmore(){ var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value); sColor = sColor.toString(16); if (sColor.length < 6) { var sTempString = "000000".substring(0,6-sColor.length); sColor = sTempString.concat(sColor); } ecolorPopup.value="#"+sColor.toUpperCase(); //document.body.bgColor="#"+sColor.toUpperCase(); ocolorPopup.document.body.blur(); } function colordialog(){ var e=event.srcElement; e.onkeyup=colordialog; ecolorPopup=e; var ocbody; var oPopBody = ocolorPopup.document.body; var colorlist=new Array(40); oPopBody.style.backgroundColor = "#f9f8f7"; oPopBody.style.border = "solid #999999 1px"; oPopBody.style.fontSize = "12px"; colorlist[0]="#000000"; colorlist[1]="#993300"; colorlist[2]="#333300"; colorlist[3]="#003300"; colorlist[4]="#003366"; colorlist[5]="#000080"; colorlist[6]="#333399"; colorlist[7]="#333333"; colorlist[8]="#800000"; colorlist[9]="#FF6600"; colorlist[10]="#808000";colorlist[11]="#008000"; colorlist[12]="#008080";colorlist[13]="#0000FF";colorlist[14]="#666699";colorlist[15]="#808080"; colorlist[16]="#FF0000";colorlist[17]="#FF9900";colorlist[18]="#99CC00";colorlist[19]="#339966"; colorlist[20]="#33CCCC";colorlist[21]="#3366FF";colorlist[22]="#800080";colorlist[23]="#999999"; colorlist[24]="#FF00FF";colorlist[25]="#FFCC00";colorlist[26]="#FFFF00";colorlist[27]="#00FF00"; colorlist[28]="#00FFFF";colorlist[29]="#00CCFF";colorlist[30]="#993366";colorlist[31]="#CCCCCC"; colorlist[32]="#FF99CC";colorlist[33]="#FFCC99";colorlist[34]="#FFFF99";colorlist[35]="#CCFFCC"; colorlist[36]="#CCFFFF";colorlist[37]="#99CCFF";colorlist[38]="#CC99FF";colorlist[39]="#FFFFFF"; ocbody = ""; ocbody += "<table CELLPADDING=0 CELLSPACING=3>"; 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>"; for(var i=0;i<colorlist.length;i++){ if(i%8==0) ocbody += "<tr>"; 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>"; if(i%8==7) ocbody += "</tr>"; } 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>"; ocbody += "</table>"; //www.jb51.net 脚本之家oPopBody.innerHTML=ocbody; ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body); } //--> </script> 选择颜色：<input name="sel1" type="text" onfocus="colordialog()" /> </BODY> </HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

checkbox实现全选的多种方法不断更新
checkbox实现全选的多种方法不断更新...
2006-07-07
javascript radio值获取代码
好多情况下，我们需要用js获取radio的值，下面是具体的实现方法，大家可以测试下。
2009-03-03
onpropertypchange
onpropertypchange...
2006-07-07
javaScript checkbox 全选/反选及批量删除
javaScript checkbox 全选/反选及批量删除实现代码，需要的朋友可以参考下。
2010-04-04
用javascript实现不按Ctrl实现Multiple Select多选
用javascript实现不按Ctrl实现Multiple Select多选...
2007-08-08
js动态在form上插入enctype=multipart/form-data的问题
在做文件上传的时候碰到了一个比较奇怪的问题，IE6，7，8上传文件总是失败，服务端接收不到文件的问题
2012-05-05
textarea的value是html文件源代码,存成html文件的代码
textarea的value是html文件源代码,存成html文件的代码...
2007-04-04
javascript multibox 全选
multibox 全选实现代码。跟checkbox等原理是一样的
2009-03-03
一个判断email合法性的函数[非正则]
没用到正则，看起来这个函数的准确度还是比较高的。
2008-12-12
javascript 动态设置已知select的option的value值的代码
当已经知道某个select options的值，判断当前select的options的值是否与已知的值相同，相同也设置下。一般用户修改页面。
2009-12-12