<!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>
<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(\\'#\' + SpColorHex[j] + \'\\')">\'
}
else {
colorTable = colorTable + \'<td width=15 style="cursor:pointer;background-color:#\' + SpColorHex[j] + \'" onclick="doclick(\\'#\' + SpColorHex[j] + \'\\')">\'
}
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(\\'#\' + SpColorHex[j] + \'\\')">\'
}
}
}
}
colorTable = \'<table border="1" cellspacing="0" cellpadding="0" style="text-align:center;cursor:pointer;border-collapse:collapse" bordercolor="000000" >\'
+ \'<tr><td colspan="21"><span style="float:right;margin-right:5px;cursor:pointer;" onclick="colorclose()">×关闭</span><span style="float:right;margin-right:5px;cursor:pointer;" onclick="defaultColor()">默认颜色</span></td></tr>\'
+ 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(colorValue) {
//alert(colorValue);
document.getElementById(\'color\').value = colorValue;
document.getElementById("colorpane").style.display = "none";
}
function defaultColor() {
document.getElementById(\'color\').value = \'\';
document.getElementById("colorpane").style.display = "none";
//alert("ok");
}
function colorclose() {
document.getElementById("colorpane").style.display = "none";
//alert("ok");
}
function coloropen() {
document.getElementById("colorpane").style.display = "";
}
window.onload = initcolor;
</script>
</p>
<p><input type="text" name="color" id="color" onclick="coloropen(event)"/> </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>