Web/Js 调色板
/*******************test.htm*******************/
<html>
<head>
<title>测试</title>
<script language="javascript" src="colorpalette.js" />
</head>
<body>
<input type="text" id="txt" name="txt" onclick="javascript:SelectColor('txt');" />
</body>
</html>
/*****************colorpalette.js****************/
document.write("<div id='_colorpalette' style='position: absolute; z-index: 9998; width: 215; height: 174; display: none;border-left:2px solid #F3F3F3;border-top:2px solid #F3F3F3; border-bottom:2px solid #999999;border-right:2px solid #999999;'>");
var _palettecolor = '#000000';
var script_t = document.getElementsByTagName('script');
var js_url='';
for (var i=0; i<script_t.length; i++)
{
if( -1 != script_t[i].src.indexOf("colorpalette.js"))
{
js_url = script_t[i].src.replace(/colorpalette.js/,'colorpalette.html');
break;
}
}
document.write("<iframe name='_colorpaletteIframe' src='"+js_url+"' scrolling=no frameborder=0 width=215 height=174></iframe></div>");
var e_colorpalette = document.getElementById("_colorpalette");
function setcolorpaletteXY()
{
var e = window.event.srcElement;
var l=e.offsetLeft;
var t=e.offsetTop;
while(e=e.offsetParent)
{
l+=e.offsetLeft;
t+=e.offsetTop;
}
e_colorpalette.style.left = l-15;
e_colorpalette.style.top = t+18;
}
function hiddencolorpalette(){e_colorpalette.style.display = "none";};
function showcolorpalette(){e_colorpalette.style.display = "block";setcolorpaletteXY();};
var colorpaletteiTime;
function setColorPalette(color)
{
_palettecolor = color;
}
function getColorByPalette()
{
return _palettecolor;
}
var dEL;
function SelectColor(obj)
{
dEL = document.getElementById(obj);
setColorPalette(dEL.value);
showcolorpalette();
}
function selectColorPalette(color)
{
if (color)
{
dEL.value=color;
dEL.style.backgroundColor=color;
setColorPalette(color);
}else{
dEL.value='';
dEL.style.backgroundColor='';
}
hiddencolorpalette();
}
/*****************colorpalette.html**************/
<!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>
<title>无标题页</title>
<style type="text/css">
body
{
margin: 2px;
background-color: #DCDCDC;
}
td
{
overflow: hidden;
cursor: pointer;
color: #FFFFFF;
font-size: 8px;
font-family: "Verdana";
}
input
{
border: 1px;
margin-top: 1px;
margin-left: 1px;
background-color: #ffffff;
width: 58px;
font-family: Verdana;
font-size: 11px;
color: #000000;
}
</style>
<script language="javascript" type="text/javascript">
var drag=false, cx=0, cy=0, o = parent.document.getElementById("_colorpalette");
/*function document.onmousemove()
{
if(drag)
{
if(o.style.left=='')o.style.left=0;
if(o.style.top=='')o.style.top=0;
o.style.left = parseInt(o.style.left) + window.event.clientX-cx;
o.style.top = parseInt(o.style.top) + window.event.clientY-cy;
}
} */
function document.onmousedown(){ dragStart();}
function document.onmouseup() {drag=false;}
function document.onmouseout() { drag=false;}
function dragStart(){cx=window.event.clientX;cy=window.event.clientY;drag=true;}
function InitColorPalette()
{
var x = document.getElementsByTagName('td');
for (var i=0; i<x.length; i++)
{
x[i].onmouseover = over;
x[i].onmouseout = out;
x[i].onclick = click;
}
setColor( parent.getColorByPalette());
}
function setColor(color)
{
document.getElementById("colPreview").style.backgroundColor = color;
document.getElementById("hexColValue").value = color;
}
//Mouse over palette effects on
function over()
{
var e = window.event.srcElement;
e.style.color = reverseColor(e.id) ;
e.innerHTML = 'O';
setColor(e.id);
}
//Mouse 移开
function out()
{
this.innerHTML='';
}
//Mouse 点击
function click()
{
selectColor(this.id);
}
function reverseColor(color)
{
var c = (color.indexOf("#")==-1 ) ? color : color.substring(1);
var len = c.length ;
var i,h;
var re = '#';
for(i=0;i<len ;i++)
{
h = parseInt("0x"+c.substring(i,i+1)) ;
re += (15-h).toString(16).toUpperCase() ;
}
return re;
}
//颜色选取
function selectColor(color)
{
if( color!='' && color.toString().match(/^#[0-9|A-F|a-f]{6}$/)==null)
{
alert("颜色代码错误！");
return false;
}
parent.selectColorPalette(color);
}
</script>
</head>
<body onload="InitColorPalette()">
<div style="width: 178px; height: 20px; margin:3px 0px 3px 17px;">
<div id="colPreview" style="border: 1px solid #000000; width: 25px; height: 20px;
float: left;">
</div>
<div style="float: left; height: 15px; width: 100px;">
<input type="text" id="hexColValue" value="" size="14" onkeydown="javascript: if(window.event.keyCode==13){selectColor(this.value);}" /></div>
<div style="float: left; width: 26px;">
</div>
<div style="float: left; font-size: 12px; cursor: pointer; padding-top: 3px;" onclick="parent.hiddencolorpalette()">
关闭</div>
</div>
<table align="center" border="0" cellpadding="0" cellspacing="1" bordercolor="#000000" bgcolor="#000000">
<tr>
<td id="#000000" bgcolor="#000000" height="10" width="10">
</td>
<td id="#003300" bgcolor="#003300" height="10" width="10">
</td>
<td id="#006600" bgcolor="#006600" height="10" width="10">
</td>
<td id="#009900" bgcolor="#009900" height="10" width="10">
</td>
<td id="#00CC00" bgcolor="#00CC00" height="10" width="10">
</td>
<td id="#00FF00" bgcolor="#00FF00" height="10" width="10">
</td>
<td id="#330000" bgcolor="#330000" height="10" width="10">
</td>
<td id="#336600" bgcolor="#336600" height="10" width="10">
</td>
<td id="#339900" bgcolor="#339900" height="10" width="10">
</td>
<td id="#33CC00" bgcolor="#33CC00" height="10" width="10">
</td>
<td id="#33FF00" bgcolor="#33FF00" height="10" width="10">
</td>
<td id="#660000" bgcolor="#660000" height="10" width="10">
</td>
<td id="#666600" bgcolor="#666600" height="10" width="10">
</td>
<td id="#669900" bgcolor="#669900" height="10" width="10">
</td>
<td id="#66CC00" bgcolor="#66CC00" height="10" width="10">
</td>
<td id="#66FF00" bgcolor="#66FF00" height="10" width="10">
</td>
</tr>
<tr>
<td id="#333333" bgcolor="#333333" height="10" width="10">
</td>
<td id="#003333" bgcolor="#003333" height="10" width="10">
</td>
<td id="#006633" bgcolor="#006633" height="10" width="10">
</td>
<td id="#009933" bgcolor="#009933" height="10" width="10">
</td>
<td id="#00CC33" bgcolor="#00CC33" height="10" width="10">
</td>
<td id="#00FF33" bgcolor="#00FF33" height="10" width="10">
</td>
<td id="#330033" bgcolor="#330033" height="10" width="10">
</td>
<td id="#336633" bgcolor="#336633" height="10" width="10">
</td>
<td id="#339933" bgcolor="#339933" height="10" width="10">
</td>
<td id="#33CC33" bgcolor="#33CC33" height="10" width="10">
</td>
<td id="#33FF33" bgcolor="#33FF33" height="10" width="10">
</td>
<td id="#660033" bgcolor="#660033" height="10" width="10">
</td>
<td id="#666633" bgcolor="#666633" height="10" width="10">
</td>
<td id="#669933" bgcolor="#669933" height="10" width="10">
</td>
<td id="#66CC33" bgcolor="#66CC33" height="10" width="10">
</td>
<td id="#66FF33" bgcolor="#66FF33" height="10" width="10">
</td>
</tr>
<tr>
<td id="#666666" bgcolor="#666666" height="10" width="10">
</td>
<td id="#003366" bgcolor="#003366" height="10" width="10">
</td>
<td id="#006666" bgcolor="#006666" height="10" width="10">
</td>
<td id="#009966" bgcolor="#009966" height="10" width="10">
</td>
<td id="#00CC66" bgcolor="#00CC66" height="10" width="10">
</td>
<td id="#00FF66" bgcolor="#00FF66" height="10" width="10">
</td>
<td id="#330066" bgcolor="#330066" height="10" width="10">
</td>
<td id="#336666" bgcolor="#336666" height="10" width="10">
</td>
<td id="#339966" bgcolor="#339966" height="10" width="10">
</td>
<td id="#33CC66" bgcolor="#33CC66" height="10" width="10">
</td>
<td id="#33FF66" bgcolor="#33FF66" height="10" width="10">
</td>
<td id="#660066" bgcolor="#660066" height="10" width="10">
</td>
<td id="#666666" bgcolor="#666666" height="10" width="10">
</td>
<td id="#669966" bgcolor="#669966" height="10" width="10">
</td>
<td id="#66CC66" bgcolor="#66CC66" height="10" width="10">
</td>
<td id="#66FF66" bgcolor="#66FF66" height="10" width="10">
</td>
</tr>
<tr>
<td id="#999999" bgcolor="#999999" height="10" width="10">
</td>
<td id="#003399" bgcolor="#003399" height="10" width="10">
</td>
<td id="#006699" bgcolor="#006699" height="10" width="10">
</td>
<td id="#009999" bgcolor="#009999" height="10" width="10">
</td>
<td id="#00CC99" bgcolor="#00CC99" height="10" width="10">
</td>
<td id="#00FF99" bgcolor="#00FF99" height="10" width="10">
</td>
<td id="#330099" bgcolor="#330099" height="10" width="10">
</td>
<td id="#336699" bgcolor="#336699" height="10" width="10">
</td>
<td id="#339999" bgcolor="#339999" height="10" width="10">
</td>
<td id="#33CC99" bgcolor="#33CC99" height="10" width="10">
</td>
<td id="#33FF99" bgcolor="#33FF99" height="10" width="10">
</td>
<td id="#660099" bgcolor="#660099" height="10" width="10">
</td>
<td id="#666699" bgcolor="#666699" height="10" width="10">
</td>
<td id="#669999" bgcolor="#669999" height="10" width="10">
</td>
<td id="#66CC99" bgcolor="#66CC99" height="10" width="10">
</td>
<td id="#66FF99" bgcolor="#66FF99" height="10" width="10">
</td>
</tr>
<tr>
<td id="#CCCCCC" bgcolor="#CCCCCC" height="10" width="10">
</td>
<td id="#0033CC" bgcolor="#0033CC" height="10" width="10">
</td>
<td id="#0066CC" bgcolor="#0066CC" height="10" width="10">
</td>
<td id="#0099CC" bgcolor="#0099CC" height="10" width="10">
</td>
<td id="#00CCCC" bgcolor="#00CCCC" height="10" width="10">
</td>
<td id="#00FFCC" bgcolor="#00FFCC" height="10" width="10">
</td>
<td id="#3300CC" bgcolor="#3300CC" height="10" width="10">
</td>
<td id="#3366CC" bgcolor="#3366CC" height="10" width="10">
</td>
<td id="#3399CC" bgcolor="#3399CC" height="10" width="10">
</td>
<td id="#33CCCC" bgcolor="#33CCCC" height="10" width="10">
</td>
<td id="#33FFCC" bgcolor="#33FFCC" height="10" width="10">
</td>
<td id="#6600CC" bgcolor="#6600CC" height="10" width="10">
</td>
<td id="#6666CC" bgcolor="#6666CC" height="10" width="10">
</td>
<td id="#6699CC" bgcolor="#6699CC" height="10" width="10">
</td>
<td id="#66CCCC" bgcolor="#66CCCC" height="10" width="10">
</td>
<td id="#66FFCC" bgcolor="#66FFCC" height="10" width="10">
</td>
</tr>
<tr>
<td id="#FFFFFF" bgcolor="#FFFFFF" height="10" width="10">
</td>
<td id="#0033FF" bgcolor="#0033FF" height="10" width="10">
</td>
<td id="#0066FF" bgcolor="#0066FF" height="10" width="10">
</td>
<td id="#0099FF" bgcolor="#0099FF" height="10" width="10">
</td>
<td id="#00CCFF" bgcolor="#00CCFF" height="10" width="10">
</td>
<td id="#00FFFF" bgcolor="#00FFFF" height="10" width="10">
</td>
<td id="#3300FF" bgcolor="#3300FF" height="10" width="10">
</td>
<td id="#3366FF" bgcolor="#3366FF" height="10" width="10">
</td>
<td id="#3399FF" bgcolor="#3399FF" height="10" width="10">
</td>
<td id="#33CCFF" bgcolor="#33CCFF" height="10" width="10">
</td>
<td id="#33FFFF" bgcolor="#33FFFF" height="10" width="10">
</td>
<td id="#6600FF" bgcolor="#6600FF" height="10" width="10">
</td>
<td id="#6666FF" bgcolor="#6666FF" height="10" width="10">
</td>
<td id="#6699FF" bgcolor="#6699FF" height="10" width="10">
</td>
<td id="#66CCFF" bgcolor="#66CCFF" height="10" width="10">
</td>
<td id="#66FFFF" bgcolor="#66FFFF" height="10" width="10">
</td>
</tr>
<tr>
<td id="#FF0000" bgcolor="#FF0000" height="10" width="10">
</td>
<td id="#993300" bgcolor="#993300" height="10" width="10">
</td>
<td id="#996600" bgcolor="#996600" height="10" width="10">
</td>
<td id="#999900" bgcolor="#999900" height="10" width="10">
</td>
<td id="#99CC00" bgcolor="#99CC00" height="10" width="10">
</td>
<td id="#99FF00" bgcolor="#99FF00" height="10" width="10">
</td>
<td id="#CC0000" bgcolor="#CC0000" height="10" width="10">
</td>
<td id="#CC6600" bgcolor="#CC6600" height="10" width="10">
</td>
<td id="#CC9900" bgcolor="#CC9900" height="10" width="10">
</td>
<td id="#CCCC00" bgcolor="#CCCC00" height="10" width="10">
</td>
<td id="#CCFF00" bgcolor="#CCFF00" height="10" width="10">
</td>
<td id="#FF0000" bgcolor="#FF0000" height="10" width="10">
</td>
<td id="#FF6600" bgcolor="#FF6600" height="10" width="10">
</td>
<td id="#FF9900" bgcolor="#FF9900" height="10" width="10">
</td>
<td id="#FFCC00" bgcolor="#FFCC00" height="10" width="10">
</td>
<td id="#FFFF00" bgcolor="#FFFF00" height="10" width="10">
</td>
</tr>
<tr>
<td id="#00FF00" bgcolor="#00FF00" height="10" width="10">
</td>
<td id="#993333" bgcolor="#993333" height="10" width="10">
</td>
<td id="#996633" bgcolor="#996633" height="10" width="10">
</td>
<td id="#999933" bgcolor="#999933" height="10" width="10">
</td>
<td id="#99CC33" bgcolor="#99CC33" height="10" width="10">
</td>
<td id="#99FF33" bgcolor="#99FF33" height="10" width="10">
</td>
<td id="#CC0033" bgcolor="#CC0033" height="10" width="10">
</td>
<td id="#CC6633" bgcolor="#CC6633" height="10" width="10">
</td>
<td id="#CC9933" bgcolor="#CC9933" height="10" width="10">
</td>
<td id="#CCCC33" bgcolor="#CCCC33" height="10" width="10">
</td>
<td id="#CCFF33" bgcolor="#CCFF33" height="10" width="10">
</td>
<td id="#FF0033" bgcolor="#FF0033" height="10" width="10">
</td>
<td id="#FF6633" bgcolor="#FF6633" height="10" width="10">
</td>
<td id="#FF9933" bgcolor="#FF9933" height="10" width="10">
</td>
<td id="#FFCC33" bgcolor="#FFCC33" height="10" width="10">
</td>
<td id="#FFFF33" bgcolor="#FFFF33" height="10" width="10">
</td>
</tr>
<tr>
<td id="#0000FF" bgcolor="#0000FF" height="10" width="10">
</td>
<td id="#993366" bgcolor="#993366" height="10" width="10">
</td>
<td id="#996666" bgcolor="#996666" height="10" width="10">
</td>
<td id="#999966" bgcolor="#999966" height="10" width="10">
</td>
<td id="#99CC66" bgcolor="#99CC66" height="10" width="10">
</td>
<td id="#99FF66" bgcolor="#99FF66" height="10" width="10">
</td>
<td id="#CC0066" bgcolor="#CC0066" height="10" width="10">
</td>
<td id="#CC6666" bgcolor="#CC6666" height="10" width="10">
</td>
<td id="#CC9966" bgcolor="#CC9966" height="10" width="10">
</td>
<td id="#CCCC66" bgcolor="#CCCC66" height="10" width="10">
</td>
<td id="#CCFF66" bgcolor="#CCFF66" height="10" width="10">
</td>
<td id="#FF0066" bgcolor="#FF0066" height="10" width="10">
</td>
<td id="#FF6666" bgcolor="#FF6666" height="10" width="10">
</td>
<td id="#FF9966" bgcolor="#FF9966" height="10" width="10">
</td>
<td id="#FFCC66" bgcolor="#FFCC66" height="10" width="10">
</td>
<td id="#FFFF66" bgcolor="#FFFF66" height="10" width="10">
</td>
</tr>
<tr>
<td id="#FFFF00" bgcolor="#FFFF00" height="10" width="10">
</td>
<td id="#993399" bgcolor="#993399" height="10" width="10">
</td>
<td id="#996699" bgcolor="#996699" height="10" width="10">
</td>
<td id="#999999" bgcolor="#999999" height="10" width="10">
</td>
<td id="#99CC99" bgcolor="#99CC99" height="10" width="10">
</td>
<td id="#99FF99" bgcolor="#99FF99" height="10" width="10">
</td>
<td id="#CC0099" bgcolor="#CC0099" height="10" width="10">
</td>
<td id="#CC6699" bgcolor="#CC6699" height="10" width="10">
</td>
<td id="#CC9999" bgcolor="#CC9999" height="10" width="10">
</td>
<td id="#CCCC99" bgcolor="#CCCC99" height="10" width="10">
</td>
<td id="#CCFF99" bgcolor="#CCFF99" height="10" width="10">
</td>
<td id="#FF0099" bgcolor="#FF0099" height="10" width="10">
</td>
<td id="#FF6699" bgcolor="#FF6699" height="10" width="10">
</td>
<td id="#FF9999" bgcolor="#FF9999" height="10" width="10">
</td>
<td id="#FFCC99" bgcolor="#FFCC99" height="10" width="10">
</td>
<td id="#FFFF99" bgcolor="#FFFF99" height="10" width="10">
</td>
</tr>
<tr>
<td id="#00FFFF" bgcolor="#00FFFF" height="10" width="10">
</td>
<td id="#9933CC" bgcolor="#9933CC" height="10" width="10">
</td>
<td id="#9966CC" bgcolor="#9966CC" height="10" width="10">
</td>
<td id="#9999CC" bgcolor="#9999CC" height="10" width="10">
</td>
<td id="#99CCCC" bgcolor="#99CCCC" height="10" width="10">
</td>
<td id="#99FFCC" bgcolor="#99FFCC" height="10" width="10">
</td>
<td id="#CC00CC" bgcolor="#CC00CC" height="10" width="10">
</td>
<td id="#CC66CC" bgcolor="#CC66CC" height="10" width="10">
</td>
<td id="#CC99CC" bgcolor="#CC99CC" height="10" width="10">
</td>
<td id="#CCCCCC" bgcolor="#CCCCCC" height="10" width="10">
</td>
<td id="#CCFFCC" bgcolor="#CCFFCC" height="10" width="10">
</td>
<td id="#FF00CC" bgcolor="#FF00CC" height="10" width="10">
</td>
<td id="#FF66CC" bgcolor="#FF66CC" height="10" width="10">
</td>
<td id="#FF99CC" bgcolor="#FF99CC" height="10" width="10">
</td>
<td id="#FFCCCC" bgcolor="#FFCCCC" height="10" width="10">
</td>
<td id="#FFFFCC" bgcolor="#FFFFCC" height="10" width="10">
</td>
</tr>
<tr>
<td id="#FF00FF" bgcolor="#FF00FF" height="10" width="10">
</td>
<td id="#9933FF" bgcolor="#9933FF" height="10" width="10">
</td>
<td id="#9966FF" bgcolor="#9966FF" height="10" width="10">
</td>
<td id="#9999FF" bgcolor="#9999FF" height="10" width="10">
</td>
<td id="#99CCFF" bgcolor="#99CCFF" height="10" width="10">
</td>
<td id="#99FFFF" bgcolor="#99FFFF" height="10" width="10">
</td>
<td id="#CC00FF" bgcolor="#CC00FF" height="10" width="10">
</td>
<td id="#CC66FF" bgcolor="#CC66FF" height="10" width="10">
</td>
<td id="#CC99FF" bgcolor="#CC99FF" height="10" width="10">
</td>
<td id="#CCCCFF" bgcolor="#CCCCFF" height="10" width="10">
</td>
<td id="#CCFFFF" bgcolor="#CCFFFF" height="10" width="10">
</td>
<td id="#FF00FF" bgcolor="#FF00FF" height="10" width="10">
</td>
<td id="#FF66FF" bgcolor="#FF66FF" height="10" width="10">
</td>
<td id="#FF99FF" bgcolor="#FF99FF" height="10" width="10">
</td>
<td id="#FFCCFF" bgcolor="#FFCCFF" height="10" width="10">
</td>
<td id="#FFFFFF" bgcolor="#FFFFFF" height="10" width="10">
</td>
</tr>
</table>
</body>
</html>
lei1217
