页面：
<html>
<head>
<title>PHPcolorPick</title>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript" language="javascript" src="task8.js">
</script>
<body>
<input type="text" name="code" id="code" value="" size="10">
<input type="text" name="color" disabled id="color" size="10" >
<input type="button" value="调色" onclick="display()">
<div id='d' style="width:100%;height:100%" onclick="disappear()">
<div id="colorpick" style="display:none">
<input type="text" name="testColor" id="testColor" style="background-color:#000000">
<input type="text" name="testCcode" disabled id="testcCode" value="#000000">
<table onmouseover="colorChange()" onclick="doClick()">
<?php
$cArray=array('00','33','66','99','CC','FF');
for($i=0;$i<count($cArray);$i++){
echo "<tr height='20'>";
for($j=0;$j<count($cArray);$j++){
for($k=0;$k<count($cArray);$k++){
$code="#".$cArray[$i].$cArray[$j].$cArray[$k];
echo "<td width='15' style='background-color:{$code}'></td>";
}
}
echo "</tr>";
}
?>
</table>
</div>
</div>
</body>
</html>
js代码：
var current=null;//鼠标悬浮的标识
/**
*拾色器开关（显示、消失）
*/
function display()
{
var status=document.getElementById("colorpick").style;
if(status.display=='none'){
status.display='block';
}else{
status.display='none';
}
}
function disappear(){
document.getElementById('colorpick').style.display = 'none';
}
/**
*鼠标滑过时获取TD的背景颜色
*/
function colorChange()
{
//解决FF中无法使用event.srcElement问题
//FF下的event.target=IE下的event.srcElement
var theEvent = window.event || arguments.callee.caller.arguments[0];
var srcElement = theEvent.srcElement;
if (!srcElement) {
srcElement = theEvent.target;
}
if(srcElement.tagName == 'TD' && current != srcElement){
if(current != null){
current.style.backgroundColor = current._background;
}
srcElement._background = srcElement.style.backgroundColor;
testColor.style.backgroundColor = srcElement.style.backgroundColor;
testcCode.value = srcElement.style.backgroundColor;
srcElement.style.backgroundColor = "white";
current = srcElement;
if(testcCode.value.indexOf('#')==-1){
var hsv = "#"+Rgb2Hsv(testcCode.value);
document.getElementById('testcCode').value = hsv ;
}
}
}
/**
*RGB转换函数
*FF下显示RGB(255,153,0)，将RGB转换成hsv，即#ffcc00.与IE下统一
*/
function Rgb2Hsv(rgb)
{
var aColor = rgb.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
var sr=parseInt(aColor[0]);
var sg=parseInt(aColor[1]);
var sb=parseInt(aColor[2]);
var r=(sr>=16)?sr.toString(16):('0'+sr.toString(16));
var g=(sg>=16)?sg.toString(16):('0'+sg.toString(16));
var b=(sb>=16)?sb.toString(16):('0'+sb.toString(16));
return r+g+b;
}
/**
*鼠标单击后，将color及colorCode赋值到文本框中
*/
function doClick()
{
var theEvent = window.event || arguments.callee.caller.arguments[0];
var srcElement = theEvent.srcElement;
if (!srcElement) {
srcElement = theEvent.target;
}
if(srcElement.tagName == "TD"){
code.value=srcElement._background;
color.style.backgroundColor = srcElement._background;
if(code.value.indexOf('#')==-1){
var hsv = "#"+Rgb2Hsv(code.value);
document.getElementById('code').value = hsv ;
}
}
}