js 颜色选择器（兼容firefox）

复制代码代码如下:<!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> <style type="text/css"> body{ text-align:center; } </style> </head> <body> <p> <script type="text/javascript" language="javascript"> <!-- var ColorHex=new Array('00','33','66','99','CC','FF') var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF') var current=null function initcolor(evt) { var colorTable='' for (i=0;i<2;i++) { for (j=0;j<6;j++) { colorTable=colorTable+'<tr height=15>' colorTable=colorTable+'<td width=15 style="background-color:#000000">' if (i==0){ colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'} else{ colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+SpColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">'} colorTable=colorTable+'<td width=15 style="background-color:#000000">' for (k=0;k<3;k++) { for (l=0;l<6;l++) { colorTable=colorTable+'<td width=15 style="cursor:pointer;background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'" onclick="doclick(this.style.backgroundColor)">' } } } } colorTable='<table border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse;width:337px;" bordercolor="000000">' +'<tr height=20><td colspan=21 bgcolor=#ffffff style="font:12px tahoma;padding-left:2px;">' +'<span style="float:left;color:#999999;">搜索吧|为站长提供专业知识搜索</span>' +'<span style="float:right;padding-right:3px;cursor:pointer;" onclick="colorclose()">×关闭</span>' +'</td></table>' +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:pointer;">' +colorTable+'</table>'; document.getElementById("colorpane").innerHTML=colorTable; var current_x = document.getElementById("inputcolor").offsetLeft; var current_y = document.getElementById("inputcolor").offsetTop; //alert(current_x + "-" + current_y) document.getElementById("colorpane").style.left = current_x + "px"; document.getElementById("colorpane").style.top = current_y + "px"; } function doclick(obj){ alert(obj); } function colorclose(){ document.getElementById("colorpane").style.display = "none"; //alert("ok"); } function coloropen(){ document.getElementById("colorpane").style.display = ""; } window.onload = initcolor; </script> </p> <p> </p> <p> </p> <p> </p> <p> <input type="button" value="颜色选择" onclick="coloropen(event)" id="inputcolor" /> </p> <p> </p> <div id="colorpane" style="position:absolute;z-index:999;display:none;"></div> </body> </html>

　　推荐阅读

　　JavaScript 事件属性绑定带参数的函数

例如不能采用这种调用方式：element.onclick = test();element.onclick = test(arg1,arg2);只能通过element.onclick = function(){ ... };或者element.onclick = test这种方式来实现，所以无法给函数传递参数。参考>>>详细阅读

本文标题：js 颜色选择器（兼容firefox）

地址：http://www.17bianji.com/kaifa2/JS/28925.html

1/2 1