js颜色选择器修改版(兼容firefox,chrome)

<!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> 
posted @ 2011-07-30 23:09  与时俱进  阅读(3235)  评论(2编辑  收藏  举报
友情链接:同里老宅院民居客栈