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>
|