Shake_JS选色器
可能大家还对颜色的选取还很烦恼.
可是,圣诞节期间.一个新的颜色选择控件已经出场,
它,包含了仿window默认取色器,PS的条型选色器,PS的拾色器,CorelDraw的色环选色器,和很多图像编辑软件通用的基本颜色选色器于一身的,Shake_JS选色器.
下载地址:http://inshake.ik8.com/inshake/shake_js.rar
压缩包包括2个文件(test.htm 和 Color.htm)：
test.htm 代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试 </title>
</head>
<script language="javascript">
function ChangeColor(){
var myColor = window.showModalDialog('Color.htm',"ColorWin",'dialogWidth:508px;dialogHeight:412px;status:no');
//变量名自己改myColor 等号后面的就是调用语句.
document.getElementById('Ctextabcdefg').style.color = myColor;
}
</script>
<body>
<p><span id="Ctextabcdefg">改变我的颜色吧,看看效果,<br/>PowerBy:动感Shake<br/>基本原则嫪人侃</span></p>
<p><input name="m" onClick="ChangeColor()" value="选色器" type="button"></p>
</body>
</html>
Color.htm 代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="author" content="动感Shake;QQ:6090900">
<meta name="keyword" content="Shake-JS取色控件">
<meta name="description" content="Shake-JS取色控件,用JS取得颜色">
<meta http-equiv="window-target" content="_top">
<title>Shake-JS取色控件</title>
<style type="text/css">
<!--
.TitleSelect {
cursor:default;
font-size: 12px;
color: #000000;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #EFEBDE;
border-left-color: #666666;
}
.TitleNoSelect {
cursor:default;
font-size: 12px;
color: #999999;
text-decoration: none;
border: 1px solid #666666;
}
.ColorFoot {
cursor:default;
font-size: 12px;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
border-top-color: #EFEBDE;
}
.ColorBody {
font-size: 12px;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #EFEBDE;
border-right-color: #666666;
border-bottom-color: #EFEBDE;
border-left-color: #666666;
}
.CustomerText {
font-size: 12px;
color: #000000;
text-decoration: none;
}
.TCBox {
font-size: 12px;
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666666;
border-right-color: #EFEBDE;
border-bottom-color: #EFEBDE;
border-left-color: #666666;
}
.Img1px {
font-size: 1px;
text-decoration: none;
}
.Buttons {
width:90%;
height:30px;
font-size: 12px;
text-decoration: none;
background-color: #EFEBDE;
border: 1px solid #666666;
}
.TCBoxSelect {
font-size: 12px;
text-decoration: none;
border: 1px groove #333333;
}
-->
</style>
</head>
<Script language="javascript" type="text/javascript">
var cMode = 1;//当前模式
function TitleOnChange(){
document.getElementById('ColorTitle_'+cMode).className = 'TitleNoSelect';
document.getElementById('Title'+cMode).style.display = 'none';
var CurSelect = event.srcElement;
cMode = CurSelect.id.substring(CurSelect.id.length - 1);
CurSelect.className = 'TitleSelect';
document.getElementById('Title'+cMode).style.display = 'block';
if(cMode != 6){
eval('WinReturnValue.value = Color'+cMode+'HTML.value;');
addButton.disabled = false;
}else{
WinReturnValue.value = "";
addButton.disabled = true;
}
delete CurSelect;
}
function RGBtoHTML(R,G,B){
R = parseInt(R);
G = parseInt(G);
B = parseInt(B);
var r=(R>=16)?R.toString(16):('0'+R.toString(16));
var g=(G>=16)?G.toString(16):('0'+G.toString(16));
var b=(B>=16)?B.toString(16):('0'+B.toString(16));
delete R,G,B;
return('#'+r.toUpperCase()+g.toUpperCase()+b.toUpperCase());
}
function HSVtoRGB(H,S,V,T){
if(T){
H = parseInt(H);
S = parseInt(S) / 100;
V = parseInt(V) / 100;
}
var r,g,b;
var k = (H%60)/60;
var c1 = V*(1-S);
var c2 = V*(1-S*k);
var c3 = V*(1-S*(1-k));
switch(parseInt(H/60)){
case 0 : r=V,g=c3;b=c1; break;
case 1 : r=c2,g=V;b=c1; break;
case 2 : r=c1,g=V;b=c3; break;
case 3 : r=c1,g=c2;b=V; break;
case 4 : r=c3,g=c1;b=V; break;
case 5 : r=V,g=c1;b=c2; break;
}
R = parseInt(r*255);
G = parseInt(g*255);
B = parseInt(b*255);
var rl = new Array(R,G,B);
delete H,S,V,r,g,b,k,c1,c2,c3,R,G,B,T;
return(rl);
}
function NumToDec(aValue, fromBase)
{
var aNum = 0;
var curNum = 0;
var i = 0;
var s = aValue;
var c = aValue.substr(0,1);
var SignChanged = false;
if (c == "-")
{
s = aValue.substr(1, aValue.length -1);
SignChanged = true;
}
for (i = 0; i < s.length; i++)
{
c = s.substr(i,1);
switch (c.toLowerCase())
{
case "a" :
curNum = 10;
break;
case "b" :
curNum = 11;
break;
case "c" :
curNum = 12;
break;
case "d" :
curNum = 13;
break;
case "e" :
curNum = 14;
break;
case "f" :
curNum = 15;
break;
default :
curNum = eval(s.substr(i,1));
}
aNum = aNum * fromBase + curNum;
}
if (SignChanged == true) aNum = aNum * -1;
delete fromBase,curNum,i,s,c,SignChanged;
return aNum;
}
function CustomerColorSelect(){
CustomerColor.rows[parseInt(CustomerColorSelRow.value)-1].cells[parseInt(CustomerColorSelCell.value)-1].className = 'TCBox';
var e = event.srcElement;
var R = e.parentNode.rowIndex + 1;
var C = e.cellIndex + 1;
e.className = 'TCBoxSelect';
CustomerColorSelRow.value = R;
CustomerColorSelCell.value = C;
WinReturnValue.value = e.bgColor;
delete e,R,C;
}
function addCustomerColor(){
var CBox = CustomerColor.rows[parseInt(CustomerColorSelRow.value)-1].cells[parseInt(CustomerColorSelCell.value)-1];
eval('CBox.bgColor = Color'+cMode+'HTML.value;');
delete CBox;
}
//====[七彩板]
function drawColorMain(){
var CX = 15;
var CY = 38;
var ColorMainLayer = '';
var SevenColor = new Array('255,0,0','255,255,0','0,255,0','0,255,255','0,0,255','255,0,255','255,0,0');
for(var i = 0 ; i < 6 ; i++){
ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+ (50 * i + CX) +'px; top:'+ CY +'px; width:50px;height:240px; background:rgb('+SevenColor[i]+')"></span><span class="Img1px" style="position:absolute; left:'+ (50 * i + CX) +'px; top:'+ CY +'px; width:50px; height:240px; background:rgb('+SevenColor[i+1]+'); filter:alpha(opacity=0,finishopacity=100,style=1);"></span>';
document.write(ColorMainLayer);
}
ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+ CX +'px; top:'+ CY +'px; width:300px; height:240px; background:rgb(153,153,153); filter:alpha(startX=0,finishX=0,startY=0,finishY=100,opacity=0,finishopacity=100,style=1);" onClick="Color1Picker()" onMouseMove="Color1Mover();if(event.button == 1){Color1Picker();}"></span>';
document.write(ColorMainLayer);
delete SevenColor,i,CX,CY,ColorMainLayer;
}
function Color1Mover(){
var eX = event.offsetX;
var eY = event.offsetY;
//色调最大值为360,选色框宽为300
eX = parseInt(eX * 360 / 300) + 1;
//饱和度最大值为100,选色框高为240
eY = 100 * eY / 240;
var ColorCist = HSVtoRGB(eX,1-eY/100,1-eY/200,false);
xColor1.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';
delete eX,eY,ColorCist;
}
function Color1Picker(){
Color1_Expler.style.top = '150px';
var eX = event.offsetX;
var eY = event.offsetY;
//色调最大值为360,选色框宽为300
eX = parseInt(eX * 360 / 300) + 1;
//饱和度最大值为100,选色框高为240
eY = 100 * eY / 240;
//H 0-360 S 0.5-0 V 2-0
var ColorCist = HSVtoRGB(eX,1-eY/100,1-eY/200,false);
V1_Line.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';
H1.value = eX;
S1.value = parseInt(240 - eY * 240 / 100);
V1.value = Color1V.value;
R1.value = ColorCist[0];
G1.value = ColorCist[1];
B1.value = ColorCist[2];
xColor2.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';
Color1HTML.value = RGBtoHTML(ColorCist[0],ColorCist[1],ColorCist[2]);
WinReturnValue.value = Color1HTML.value;
delete eX,eY,ColorCist;
}
function Color1_LinePicker(Ev){
var eY = event.y;
V1.value = 240 - (eY - 41);
Color1V.value = 240 - (eY - 41);
Color1_Expler.style.top = eY - 8 + 'px';
var H = parseInt(H1.value)-5;
var S = (1 - (240 - parseInt(S1.value)) / 240) / 2;
if(S1.value<=120){
var V = (240 - parseInt(event.offsetY)) / 240;
}else{
var V = (2 - parseInt(event.offsetY + 10) / 120);
}
var ColorCist = HSVtoRGB(H,S,V,false);
if(ColorCist[0]>255)
ColorCist[0]=255;
else if(ColorCist[0]<0)
ColorCist[0]=0;
if(ColorCist[1]>255)
ColorCist[1]=255;
else if(ColorCist[1]<0)
ColorCist[1]=0;
if(ColorCist[2]>255)
ColorCist[2]=255;
else if(ColorCist[2]<0)
ColorCist[2]=0;
R1.value = ColorCist[0];
G1.value = ColorCist[1];
B1.value = ColorCist[2];
if(Ev){
xColor1.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';
}
xColor2.style.background = 'rgb('+ColorCist[0]+','+ColorCist[1]+','+ColorCist[2]+')';
Color1HTML.value = RGBtoHTML(ColorCist[0],ColorCist[1],ColorCist[2]);
WinReturnValue.value = Color1HTML.value;
delete ColorCist,H,S,V,eY,Ev;
}
//==[颜色条]
function drawColorLine(){
var CX = 50;
var CY = 180;
var ColorMainLayer = '';
var SevenColor = new Array('255,0,0','255,255,0','0,255,0','0,255,255','0,0,255','255,0,255','255,0,0');
for(var i = 0 ; i < 6 ; i++){
ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+ (50 * i + CX) +'px; top:'+ CY +'px; width:50px;height:100px; background:rgb('+SevenColor[i]+')"></span><span class="Img1px" style="position:absolute; left:'+ (50 * i + CX) +'px; top:'+ CY +'px; width:50px; height:100px; background:rgb('+SevenColor[i+1]+'); filter:alpha(opacity=0,finishopacity=100,style=1);"></span>';
document.write(ColorMainLayer);
}
ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+CX+'px; top:'+CY+'px; width:300px; height:50px; background:rgb(255,255,255); filter:alpha(opacity=100,finishopacity=0,startX=0,startY=0,finishX=0,finishY=100,style=1)"></span><span class="Img1px" style="position:absolute; left:'+CX+'px; top:'+(50+CY)+'px; width:300px; height:50px; background:rgb(0,0,0); filter:alpha(opacity=0,finishopacity=100,startX=0,startY=0,finishX=0,finishY=100,style=1)"></span><span class="Img1px" style="position:absolute; left:'+CX+'px; top:'+CY+'px; width:300px; height:100px;" onmouseup="ePickColor(true);" onmousemove="ePickColor(false);if(event.button==1) ePickColor(true);"></span>';
document.write(ColorMainLayer);
delete CX,CY,ColorMainLayer,SevenColor,i;
}
function eChangeR(w,t){
var k = new Array();
switch(w){
case 1:
var Rd = parseInt(event.offsetX * 256 / 300);
eColor1.style.background = 'rgb('+Rd+','+G2.value+','+B2.value+')';
if(t){
R2.value = Rd;
Rj.style.left = event.x - 8;
Rj.innerText = '∧' + R2.value;
eGreenD.style.background = 'rgb('+R2.value+',255,'+B2.value+')';
eGreenF.style.background = 'rgb('+R2.value+',0,'+B2.value+')';
eBlueD.style.background = 'rgb('+R2.value+','+G2.value+',255)';
eBlueF.style.background = 'rgb('+R2.value+','+G2.value+',0)';
eColor2.style.background = 'rgb('+Rd+','+G2.value+','+B2.value+')';
Rd = Rd>=10?Rd.toString(16).toUpperCase():'0'+Rd;
k[0] = G2.value>=10?parseInt(G2.value).toString(16).toUpperCase():'0'+G2.value;
k[1] = B2.value>=10?parseInt(B2.value).toString(16).toUpperCase():'0'+B2.value;
Color2HTML.value = '#'+Rd+k[0]+k[1];
WinReturnValue.value = Color2HTML.value;
}
delete Rd;
break;
case 2:
var Gd = parseInt(event.offsetX * 256 / 300);
eColor1.style.background = 'rgb('+R2.value+','+Gd+','+B2.value+')';
if(t){
G2.value = Gd;
Gj.style.left = event.x - 8;
Gj.innerText = '∧' + G2.value;
eRedD.style.background = 'rgb(255,'+G2.value+','+B2.value+')';
eRedF.style.background = 'rgb(0,'+G2.value+','+B2.value+')';
eBlueD.style.background = 'rgb('+R2.value+','+G2.value+',255)';
eBlueF.style.background = 'rgb('+R2.value+','+G2.value+',0)';
eColor2.style.background = 'rgb('+R2.value+','+Gd+','+B2.value+')';
Gd = Gd>=10?Gd.toString(16).toUpperCase():'0'+Gd;
k[0] = R2.value>=10?parseInt(R2.value).toString(16).toUpperCase():'0'+R2.value;
k[1] = B2.value>=10?parseInt(B2.value).toString(16).toUpperCase():'0'+B2.value;
Color2HTML.value = '#'+k[0]+Gd+k[1];
WinReturnValue.value = Color2HTML.value;
}
delete Gd;
break;
case 3:
var Bd = parseInt(event.offsetX * 256 / 300);
eColor1.style.background = 'rgb('+R2.value+','+B2.value+','+Bd+')';
if(t){
B2.value = Bd;
Bj.style.left = event.x - 8;
Bj.innerText = '∧' + B2.value;
eRedD.style.background = 'rgb(255,'+G2.value+','+B2.value+')';
eRedF.style.background = 'rgb(0,'+G2.value+','+B2.value+')';
eGreenD.style.background = 'rgb('+R2.value+',255,'+B2.value+')';
eGreenF.style.background = 'rgb('+R2.value+',0,'+B2.value+')';
eColor2.style.background = 'rgb('+R2.value+','+B2.value+','+Bd+')';
Bd = Bd>=10?Bd.toString(16).toUpperCase():'0'+Bd;
k[0] = R2.value>=10?parseInt(R2.value).toString(16).toUpperCase():'0'+R2.value;
k[1] = G2.value>=10?parseInt(G2.value).toString(16).toUpperCase():'0'+G2.value;
Color2HTML.value = '#'+k[0]+k[1]+Bd;
WinReturnValue.value = Color2HTML.value;
}
delete Bd;
break;
}
delete w,t,k;
}
function ePickColor(w){
var pX = event.offsetX;
var pY = event.offsetY;
var HalfH = 50;
H = parseInt(pX*360/300);
if(event.offsetY < HalfH){
S = pY/HalfH;
V = 1;
}
else{
S = 1;
V = (100-pY)/HalfH;
}
var t = HSVtoRGB(H, parseInt(S*100), parseInt(V*100),true);
eColor1.style.background = 'rgb('+t[0]+','+t[1]+','+t[2]+')';
if(w){
Rj.style.left = 43 + parseInt(t[0] * 300 / 255);
Rj.innerText = '∧' + t[0];
Gj.style.left = 43 + parseInt(t[1] * 300 / 255);
Gj.innerText = '∧' + t[1];
Bj.style.left = 43 + parseInt(t[2] * 300 / 255);
Bj.innerText = '∧' + t[2];
eGreenD.style.background = 'rgb('+R2.value+',255,'+B2.value+')';
eGreenF.style.background = 'rgb('+R2.value+',0,'+B2.value+')';
eBlueD.style.background = 'rgb('+R2.value+','+G2.value+',255)';
eBlueF.style.background = 'rgb('+R2.value+','+G2.value+',0)';
eRedD.style.background = 'rgb(255,'+G2.value+','+B2.value+')';
eRedF.style.background = 'rgb(0,'+G2.value+','+B2.value+')';
eBlueD.style.background = 'rgb('+R2.value+','+G2.value+',255)';
eBlueF.style.background = 'rgb('+R2.value+','+G2.value+',0)';
eRedD.style.background = 'rgb(255,'+G2.value+','+B2.value+')';
eRedF.style.background = 'rgb(0,'+G2.value+','+B2.value+')';
eGreenD.style.background = 'rgb('+R2.value+',255,'+B2.value+')';
eGreenF.style.background = 'rgb('+R2.value+',0,'+B2.value+')';
H2.value = H;
S2.value = parseInt(S*240);
V2.value = parseInt(V*240);
R2.value = t[0];
G2.value = t[1];
B2.value = t[2];
eColor2.style.background = 'rgb('+t[0]+','+t[1]+','+t[2]+')';
t[0]=t[0]>=10?t[0].toString(16).toUpperCase():'0'+t[0];
t[1]=t[1]>=10?t[1].toString(16).toUpperCase():'0'+t[1];
t[2]=t[2]>=10?t[2].toString(16).toUpperCase():'0'+t[2];
Color2HTML.value = '#'+t[0]+t[1]+t[2];
WinReturnValue.value = Color2HTML.value;
}
delete pX,pY,HalfH,H,S,V,t,w;
}
//=====[拾色器]
function drawColorSelBox(){
var CX = 270;
var CY = 40;
var ColorMainLayer = '';
var SevenColor = new Array('255,0,0','255,0,255','0,0,255','0,255,255','0,255,0','255,255,0','255,0,0');
for(var i = 0 ; i < 6 ; i++){
ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+ CX +'px; top:'+ (40 * i + CY) +'px; width:50px;height:40px; background:rgb('+SevenColor[i]+')"></span><span class="Img1px" style="position:absolute; left:'+ CX +'px; top:'+ (40 * i + CY) +'px; width:50px; height:40px; background:rgb('+SevenColor[i+1]+'); filter:alpha(startX=100,startY=0,finisthX=0,finishY=100,opacity=0,finishopacity=100,style=1);"></span>';
document.write(ColorMainLayer);
}
ColorMainLayer = '<span class="Img1px" style="position:absolute; left:'+ CX +'px; top:'+ CY +'px; width:50px;height:240px;" onClick="changeColorH(true);" onMouseMove="changeColorH(false);if(event.button==1) changeColorH(true);"></span>';
document.write(ColorMainLayer);
delete CX,CY,SevenColor,ColorMainLayer;
}
function changeColorH(r){
var Hd = parseInt(event.offsetY * 361 / 240);
if(Hd < 0) Hd = 0;
var Md = HSVtoRGB((359 - Hd),parseInt(S3.value) * 100 / 240,parseInt(V3.value) * 100 / 240,true);
uColor1.style.background = 'rgb('+Md[0]+','+Md[1]+','+Md[2]+')';
if(r){
uColor2.style.background = 'rgb('+Md[0]+','+Md[1]+','+Md[2]+')';
uColorH.style.top = event.y - 7;
uColorH.innerText = '＜' + (359 - Hd);
H3.value = (359 - Hd);
R3.value = Md[0];
G3.value = Md[1];
B3.value = Md[2];
Md[0] =Md[0]>=10?Md[0].toString(16).toUpperCase():'0'+Md[0];
Md[1] =Md[1]>=10?Md[1].toString(16).toUpperCase():'0'+Md[1];
Md[2] =Md[2]>=10?Md[2].toString(16).toUpperCase():'0'+Md[2];
Md[0] = Md[0].length == 1? '0'+Md[0]:Md[0];
Md[1] = Md[1].length == 1? '0'+Md[1]:Md[1];
Md[2] = Md[2].length == 1? '0'+Md[2]:Md[2];
Color3HTML.value = '#' + Md[0] + Md[1] + Md[2];
WinReturnValue.value = Color3HTML.value;
Md = HSVtoRGB((359 - Hd),1,1,false);
ChangeLayerColor.style.background = 'rgb('+Md[0]+','+Md[1]+','+Md[2]+')';
}
delete Hd,Md,r;
}
function uPickColorer(r){
var eX = event.offsetX;
var eY = 240 - event.offsetY;
var Cd = HSVtoRGB(H3.value,eX * 100 / 240,eY * 100 / 240,true);
uColor1.style.background = 'rgb('+Cd[0]+','+Cd[1]+','+Cd[2]+')';
if(r){
uColor2.style.background = 'rgb('+Cd[0]+','+Cd[1]+','+Cd[2]+')';
S3.value = eX;
V3.value = eY;
R3.value = Cd[0];
G3.value = Cd[1];
B3.value = Cd[2];
Cd[0] =Cd[0]>=10?Cd[0].toString(16).toUpperCase():'0'+Cd[0];
Cd[1] =Cd[1]>=10?Cd[1].toString(16).toUpperCase():'0'+Cd[1];
Cd[2] =Cd[2]>=10?Cd[2].toString(16).toUpperCase():'0'+Cd[2];
Cd[0] = Cd[0].length == 1? '0'+Cd[0]:Cd[0];
Cd[1] = Cd[1].length == 1? '0'+Cd[1]:Cd[1];
Cd[2] = Cd[2].length == 1? '0'+Cd[2]:Cd[2];
Color3HTML.value = '#' + Cd[0] + Cd[1] + Cd[2];
WinReturnValue.value = Color3HTML.value;
}
delete eX,eY,r,Cd;
}
//======[色环]
var CircleX = 96;
var CircleY = 120;
function drawCircleColor(){
var CircleMinR = 70;
var CircleMaxR = 90;
var EX,EY,l;
var t;
for(;CircleMinR <= CircleMaxR;CircleMinR+=4){
for(j = 0;j <= 359;j++){
EX = parseInt(CircleMinR * Math.sin(3.14*j/180));
EY = parseInt(CircleMinR * Math.cos(3.14*j/180));
t = nForColor(j);
l = '<span class="img1px" H="'+j+','+CircleMinR+'" style="position:absolute; width:4px; height:4px; background:'+t+'; left:'+(CircleX+EX)+'px; top:'+(CircleY+EY)+'px;" onMouseDown="hidePoints();" onMouseUp="showPoints();getPointInfo(tModer.value);" onMouseOver="tColor1.style.background=\'\';tColor1.style.background=this.style.background;"></span>';
document.write(l);
}
}
delete CircleMinR,CircleMaxR,EX,EY,l,t,j;
}
function nForColor(cNum){
var t = '';
if(cNum >= 300 && cNum <= 360){
cNum -= 300;
t = parseInt(255-cNum*4.25).toString(16);
if(t.length==1) t = '0' + t;
t = 'FF00' + t;
return(t);
}else if(cNum >= 240 && cNum <= 300){
cNum -= 240;
t = parseInt(cNum*4.25).toString(16);
if(t.length==1) t = '0' + t;
t += '00FF';
return(t);
}else if(cNum >= 180 && cNum <= 240){
cNum -= 180;
t = parseInt(255-cNum*4.25).toString(16);
if(t.length==1) t = '0' + t;
t = '00' + t + 'FF';
return(t);
}else if(cNum >= 120 && cNum <= 180){
cNum -= 120;
t = parseInt(cNum*4.25).toString(16);
if(t.length==1) t = '0' + t;
t = '00FF' + t;
return(t);
}else if(cNum >= 60 && cNum <= 120){
cNum -= 60;
t = parseInt(255-cNum*4.25).toString(16);
if(t.length==1) t = '0' + t;
t += 'FF00'
return(t);
}else{
t = parseInt(cNum*4.25).toString(16);
if(t.length==1) t = '0' + t;
t = 'FF' + t + '00'
return(t);
}
}
function hidePoints(){
for(i = 1 ; i <= tModer.value ; i++){
eval('tPoint'+i+'.style.display = "none";');
}
}
function showPoints(){
for(i = 1 ; i <= tModer.value ; i++){
eval('tPoint'+i+'.style.display = "block";');
}
}
function changeColorMode(){
var ModeNum = tModer.value;
for(i = 2 ; i <= 5 ; i++){
eval('tPoint'+i+'.style.display = "none";');
eval('tLine'+i+'.style.display = "none";')
}
for(i=2;i<=ModeNum;i++){
eval('tPoint'+i+'.style.display = "block";');
eval('tLine'+i+'.style.display = "block";')
}
var t = '',a = 360 / ModeNum;
var l = parseInt(H4.value);
for(i = 2; i <= ModeNum ; i++){
l += a;
l %= 360;
t = nForColor(l);
r = NumToDec(t.substring(0,2),16);
g = NumToDec(t.substring(2,4),16);
b = NumToDec(t.substring(4,6),16);
eval('tColorMode'+i+'.style.background="rgb('+r+','+g+','+b+')";');
eval('tPointColor'+i+'.value = "'+l+'"');
EX = CircleX + parseInt(CurAa.value * Math.sin(3.14 * l / 180)) - 3;
EY = CircleY + parseInt(CurAa.value * Math.cos(3.14 * l / 180));
eval('tPoint'+i+'.style.left = "'+ EX +'px";');
eval('tPoint'+i+'.style.top = "'+ EY +'px";');
}
switch(ModeNum){
case '5':
tPlantz1.style.left = 198;
tPlantz2.style.left = 236;
tPlantz3.style.left = 274;
tPlantz4.style.left = 312;
tPlantz5.style.left = 351;
break;
case '4':
tPlantz1.style.left = 202;
tPlantz2.style.left = 249;
tPlantz3.style.left = 297;
tPlantz4.style.left = 346;
break;
case '3':
tPlantz1.style.left = 210;
tPlantz2.style.left = 273;
tPlantz3.style.left = 338;
break;
case '2':
tPlantz1.style.left = 226;
tPlantz2.style.left = 322;
break;
default:
tPlantz1.style.left = 275;
break;
}
delete ModeNum,t,a,l,i;
}
function getPointInfo(m){
tPoint1.style.top = event.y - 7 + 'px';
tPoint1.style.left = event.x - 7 + 'px';
tPlantz1.style.top = 230;
var e = event.srcElement;
var r = NumToDec(e.style.background.substring(1,3),16);
var g = NumToDec(e.style.background.substring(3,5),16);
var b = NumToDec(e.style.background.substring(5,7),16);
var l = parseInt(e.H.split(',')[0]);//当前点的角度
var Round = e.H.split(',')[1];//半径
tPointColor1.value = l;
CurAa.value = Round;
H4.value = l;
S4.value = 240;
V4.value = 240;
R4.value = r;
G4.value = g;
B4.value = b;
Color4HTML.value = RGBtoHTML(r,g,b);
WinReturnValue.value = Color4HTML.value;
tColorMode1.style.background = 'rgb('+r+','+g+','+b+')';
tColorS.style.background = 'rgb('+r+','+g+','+b+')';
var t = '',a = 360 / m;
var EX,EY;
//点数
for(i = 2; i <= m ; i++){
l += a;
l %= 360;
eval('tPointColor'+i+'.value = "'+l+'"');
t = nForColor(l);
EX = CircleX + parseInt(Round * Math.sin(3.14 * l / 180)) - 3;
EY = CircleY + parseInt(Round * Math.cos(3.14 * l / 180)) - 3;
eval('tPoint'+i+'.style.left = "'+ EX +'px";');
eval('tPoint'+i+'.style.top = "'+ EY +'px";');
r = NumToDec(t.substring(0,2),16);
g = NumToDec(t.substring(2,4),16);
b = NumToDec(t.substring(4,6),16);
eval('tColorMode'+i+'.style.background="rgb('+r+','+g+','+b+')";');
eval("tPlantz"+i+".style.top = 230;");
}
tColorSz.style.left = 67;
tColorSz.innerText = '∧240';
delete e,r,g,b,l,t,EX,EY,m,a,i,Round;
}
function tColorSchange(k){
var S = parseInt(240 - event.offsetX * 240 / 300);
var t = HSVtoRGB(H4.value,S * 100 / 240,V4.value * 100 / 240,true);
var r = '';
tColor1.style.background = 'rgb('+t+')';
if(k){
R4.value = t[0];
G4.value = t[1];
B4.value = t[2];
Color4HTML.value = RGBtoHTML(t[0],t[1],t[2]);
WinReturnValue.value = Color4HTML.value;
tColorSz.style.left = event.x - 7;
tColorSz.innerText = '∧' + S;
tColor2.style.background = 'rgb('+t+')';
S4.value = S;
for(i = 1;i <= 5 ; i++){
r = HSVtoRGB(eval('tPointColor'+i+'.value'),S * 100 / 240,100,true);
eval("tColorMode"+i+".style.background = 'rgb("+r+")';");
}
delete i;
}
delete S,t,k,r;
}
function tColorHchange(k,w){
var H = eval('tPointColor'+w+'.value');
var e = parseInt(event.offsetY * 240 / 160)
var t = HSVtoRGB(H,S4.value * 100 / 240,e * 100 / 240,true);
tColor1.style.background = 'rgb('+t+')';
if(k){
tColor2.style.background = 'rgb('+t+')';
H4.value = H;
R4.value = t[0];
G4.value = t[1];
B4.value = t[2];
Color4HTML.value = RGBtoHTML(t[0],t[1],t[2]);
WinReturnValue.value = Color4HTML.value;
eval('tPlantz'+w+'.style.top = 70 + event.offsetY;');
e = e / 240 * 255;
S4Line.style.background = 'rgb('+e+','+e+','+e+')';
t = HSVtoRGB(H,100,e * 100 / 240,true);
tColorS.style.background = 'rgb('+t+')';
delete V;
}
delete H,t,k,w;
}
//==[基本色]
function writeColorTable(){
var tc = document.createElement('Table');
tc.border = 0;
tc.cellSpacing = "0";
tc.cellPadding = "0";
tc.width = 370;
tc.height = 210;
tc.align = "center";
var r = new Object();
var c = new Object();
var i,j;
var k = new Array(0,0,0);
for(i = 0,j = 0;i <= 11;i++){
r = tc.insertRow(i);
r.className = 'TCBox';
for(j = 0; j <= 21; j++){
c = r.insertCell(j);
if(j == 0 || j == 2){
c.style.background = "rgb(0,0,0)";
}//end for cell 1,3
if(j == 1){
switch(i){
case 0:c.style.background = "rgb(0,0,0)";break;
case 1:c.style.background = "rgb(51,51,51)";break;
case 2:c.style.background = "rgb(102,102,102)";break;
case 3:c.style.background = "rgb(153,153,153)";break;
case 4:c.style.background = "rgb(204,204,204)";break;
case 5:c.style.background = "rgb(255,255,255)";break;
case 6:c.style.background = "rgb(255,0,0)";break;
case 7:c.style.background = "rgb(0,255,0)";break;
case 8:c.style.background = "rgb(0,0,255)";break;
case 9:c.style.background = "rgb(255,255,0)";break;
case 10:c.style.background = "rgb(0,255,255)";break;
default:c.style.background = "rgb(255,0,255)";break;
}
}//end for cell 2
if(j >= 3){
if(i >= 0 && i<= 5 && j >= 3 && j<= 8){
k[0] = 0;
k[1] = 51 * (j - 3);
}
if(i >= 6 && i<= 11 && j >= 3 && j<= 8){
k[0] = 153;
k[1] = 51 * (j - 3);
}
if(i >= 0 && i<= 5 && j >= 9 && j<= 14){
k[0] = 51;
k[1] = 51 * (j - 9);
}
if(i >= 6 && i<= 11 && j >= 9 && j<= 14){
k[0] = 204;
k[1] = 51 * (j - 9);
}
if(i >= 0 && i<= 5 && j >= 15 && j<= 20){
k[0] = 102;
k[1] = 51 * (j - 15);
}
if(i >= 6 && i<= 11 && j >= 15 && j<= 20){
k[0] = 255;
k[1] = 51 * (j - 15);
}
c.style.background = 'rgb('+k+')';
if(j == 21)
c.style.background = 'rgb(0,0,0)';
}//end for colorp
c.className = 'TCBox';
c.onMouseOver = 'qColor1.style.background=this.style.background;';
c.onMouseUp = 'emSelectColor();';
}//end for j
if((i + 1) % 6 == 0){
k[2] = 0;
}else{
k[2] += 51;
}
}//end for i
document.write(tc.outerHTML);
}
function emSelectColor(){
var e = event.srcElement;
var t = e.style.background.substr(4).substr(0,e.style.background.length - 5).split(',');
qColor2.style.background = 'rgb('+t+')';
R5.value = t[0];
G5.value = t[1];
B5.value = t[2];
Color5HTML.value = RGBtoHTML(t[0],t[1],t[2]);
WinReturnValue.value = Color5HTML.value;
delete e,t;
}
</Script>
<!--[网页总宽度508,高度412]-->
<body topmargin="0" leftmargin="0" style="cursor:default;" onSelectStart="if(event.srcElement.tagName!='INPUT') return false;">
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#EFEBDE">
<tr>
<td><table width="100%" height="25" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td onClick="TitleOnChange()" id="ColorTitle_1" class="TitleSelect">七彩板</td>
<td onClick="TitleOnChange()" id="ColorTitle_2" class="TitleNoSelect">颜色条</td>
<td onClick="TitleOnChange()" id="ColorTitle_3" class="TitleNoSelect">拾色器</td>
<td onClick="TitleOnChange()" id="ColorTitle_4" class="TitleNoSelect">色 环</td>
<td onClick="TitleOnChange()" id="ColorTitle_5" class="TitleNoSelect">基本色</td>
<td onClick="TitleOnChange()" id="ColorTitle_6" class="TitleNoSelect">版 权</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="260" class="ColorBody">
<table id="Title1" width="500" height="260" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="8" align="center"><table width="300" height="240" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><script language="javascript">drawColorMain();</script></td>
</tr>
</table></td>
<td width="50" rowspan="8"><table width="40" height="240" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="V1_Line" valign="top" style="background:rgb(153,153,153);" class="TCBox">
<span style="position:absolute; width:38px; height:120px; background:rgb(255,255,255); filter:alpha(startX=0,startY=0,finishX=0,finishY=100,opacity=100,finishopacity=0,style=1);"></span>
<span style="position:absolute; top:157px; width:38px; height:120px; background:rgb(0,0,0); filter:alpha(startX=0,startY=0,finishX=0,finishY=100,opacity=0,finishopacity=100,style=1);"></span>
<span onClick="Color1_LinePicker(true);" onMouseMove="if(event.button==1){Color1_LinePicker(true);}" style="position:absolute; width:38px; height:240px;"></span>
<span id="Color1_Expler" class="CustomerText" style="position:absolute; top: 150px; left: 360px;">＜</span>
</td>
</tr>
</table></td>
<td width="50" align="right" class="CustomerText">色调:</td>
<td width="80"><input name="H1" type="text" class="TCBox" id="H1" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">饱和度:</td>
<td width="80"><input name="S1" type="text" class="TCBox" id="S1" value="1" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">亮度:</td>
<td width="80"><input name="V1" type="text" class="TCBox" id="V1" value="120" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">红:</td>
<td width="80"><input name="R1" type="text" class="TCBox" id="R1" value="128" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">绿:</td>
<td width="80"><input name="G1" type="text" class="TCBox" id="G1" value="128" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">蓝:</td>
<td width="80"><input name="B1" type="text" class="TCBox" id="B1" value="128" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">颜色:</td>
<td class="CustomerText"><input name="Color1HTML" type="text" class="TCBox" id="Color1HTML" value="#999999" size="7" maxlength="7"> </td>
</tr>
<tr>
<td colspan="2" align="center" class="CustomerText"><table width="100" height="60" border="0" cellpadding="0" cellspacing="1">
<tr align="center">
<td class="CustomerText">颜色</td>
<td class="CustomerText">选择</td>
</tr>
<tr>
<td id="xColor1" height="40" class="TCBox" style="background:rgb(153,153,153);"> </td>
<td id="xColor2" height="40" class="TCBox" style="background:rgb(153,153,153);"> </td>
</tr>
</table></td>
</tr>
</table>
<table id="Title2" width="500" height="260" border="0" cellpadding="0" cellspacing="0" style="display:none;">
<tr>
<td width="60" align="center" class="CustomerText">红:</td>
<td class="CustomerText">
<table width="300" height="30" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="eRedD" class="TCBox" valign="top" style="background:rgb(255,0,0);">
<span id="Rj" style="position:absolute; left:43px; top:67px; width: 30px;" class="CustomerText">∧0</span>
<span id="eRedF" onMouseMove="eChangeR(1,false);if(event.button==1) eChangeR(1,true);" onClick="eChangeR(1,true);" style="width:300px; height:28px; background:rgb(0,0,0); filter:alpha(opacity=100,finishopacity=0,style=1);"></span>
</td>
</tr>
</table></td>
<td width="180" rowspan="4" align="center" class="CustomerText"><table width="100%" height="100%" border="0" cellpadding="3" cellspacing="1" class="CustomerText">
<tr>
<td width="45%" align="right">色调:</td>
<td width="55%"><input name="H2" type="text" class="TCBox" id="H2" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">饱和度:</td>
<td><input name="S2" type="text" class="TCBox" id="S2" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">亮度:</td>
<td><input name="V2" type="text" class="TCBox" id="V2" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">红:</td>
<td><input name="R2" type="text" class="TCBox" id="R2" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">绿:</td>
<td><input name="G2" type="text" class="TCBox" id="G2" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">蓝:</td>
<td><input name="B2" type="text" class="TCBox" id="B2" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">颜色:</td>
<td><input name="Color2HTML" type="text" class="TCBox" id="Color2HTML" value="#000000" size="7" maxlength="7"></td>
</tr>
<tr align="center">
<td colspan="2">
<table width="100" height="60" border="0" cellpadding="0" cellspacing="1">
<tr align="center">
<td class="CustomerText">颜色</td>
<td class="CustomerText">选择</td>
</tr>
<tr>
<td id="eColor1" height="40" class="TCBox" style="background:rgb(0,0,0);"> </td>
<td id="eColor2" height="40" class="TCBox" style="background:rgb(0,0,0);"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td width="60" align="center" class="CustomerText">绿:</td>
<td class="CustomerText">
<table width="300" height="30" border="0" cellpadding="0" cellspacing="0" class="TCBox">
<tr>
<td id="eGreenD" style="background:rgb(0,255,0);">
<span id="Gj" style="position:absolute; left:43px; top:117px; width: 30px;" class="CustomerText">∧0</span>
<span id="eGreenF" onMouseMove="eChangeR(2,false);if(event.button==1) eChangeR(2,true);" onClick="eChangeR(2,true);" style="width:300px; height:28px; background:rgb(0,0,0); filter:alpha(opacity=100,finishopacity=0,style=1);"></span>
</td>
</tr>
</table></td>
</tr>
<tr>
<td width="60" align="center" class="CustomerText">蓝:</td>
<td class="CustomerText">
<table width="300" height="30" border="0" cellpadding="0" cellspacing="0" class="TCBox">
<tr>
<td id="eBlueD" style="background:rgb(0,0,255);">
<span id="Bj" style="position:absolute; left:43px; top:166px; width: 30px;" class="CustomerText">∧0</span>
<span id="eBlueF" onMouseMove="eChangeR(3,false);if(event.button==1) eChangeR(3,true);" onClick="eChangeR(3,true);" style="width:300px; height:28px; background:rgb(0,0,0); filter:alpha(opacity=100,finishopacity=0,style=1);"></span>
</td>
</tr>
</table></td>
</tr>
<tr>
<td width="60" align="center" class="CustomerText">色块:</td>
<td height="70" class="CustomerText"><script language="javascript">drawColorLine();</script></td>
</tr>
</table>
<table width="500" height="260" border="0" cellpadding="0" cellspacing="0" id="Title3" style="display:none;">
<tr>
<td width="260" rowspan="8">
<span id="ChangeLayerColor" style="position:absolute;left:15px; top:40px; width:241px; height:241px; background:rgb(255,0,0); filter:alpha(Opacity=0,finishOpacity=100,startX=0,startY=80,finishX=100,finishY=0,style=1);"></span>
<span style="position:absolute; left:15px; top:109px; width:241px; height:172px; background:rgb(0,0,0); filter:alpha(Opacity=0,finishOpacity=100,startX=0,startY=0,finishX=0,finishY=100,style=1);"></span>
<span style="position:absolute; left:15px; top:40px; width:241px; height:241px; background:rgb(255,255,255); filter:alpha(Opacity=100,finishOpacity=0,startX=0,startY=4,finishX=80,finishY=80,style=1);"></span>
<span style="position:absolute; left:15px; top:40px; width:241px; height:241px;" onClick="uPickColorer(true);" onMouseMove="uPickColorer(false);if(event.button==1){uPickColorer(true);}"></span>
</td>
<td width="50" rowspan="8" valign="top">
<span id="uColorH" style="position:absolute; top:35px; left:320px; width: 38px;" class="CustomerText">＜359</span>
<script language="javascript">drawColorSelBox();</script></td>
<td align="right" class="CustomerText">色调:</td>
<td class="CustomerText"><input name="H3" type="text" class="TCBox" id="H3" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">饱和度:</td>
<td class="CustomerText"><input name="S3" type="text" class="TCBox" id="H37" value="240" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">亮度:</td>
<td class="CustomerText"><input name="V3" type="text" class="TCBox" id="H38" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">红:</td>
<td class="CustomerText"><input name="R3" type="text" class="TCBox" id="H39" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">绿:</td>
<td class="CustomerText"><input name="G3" type="text" class="TCBox" id="H310" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">蓝:</td>
<td class="CustomerText"><input name="B3" type="text" class="TCBox" id="H311" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">颜色:</td>
<td class="CustomerText"><input name="Color3HTML" type="text" class="TCBox" id="H312" value="#000000" size="7" maxlength="7"></td>
</tr>
<tr>
<td colspan="2" align="center"><table width="100" height="60" border="0" cellpadding="0" cellspacing="1">
<tr align="center">
<td class="CustomerText">颜色</td>
<td class="CustomerText">选择</td>
</tr>
<tr>
<td id="uColor1" height="40" class="TCBox" style="background:rgb(0,0,0);"> </td>
<td id="uColor2" height="40" class="TCBox" style="background:rgb(0,0,0);"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="500" height="260" border="0" cellpadding="0" cellspacing="0" id="Title4" onMouseUp="showPoints()" style="display:none;">
<tr>
<td width="77%" rowspan="8" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" rowspan="2"><Script language="javascript">drawCircleColor();</Script>
<span id="tPoint1" onMouseDown="hidePoints();" style="position:absolute; font-size:12px; left:93px; top:199px; z-index:400;">⊙</span>
<span id="tPoint2" onMouseDown="hidePoints();" style="position:absolute; font-size:12px; left:132px; top:170px; z-index:400; display:none;">⊙</span>
<span id="tPoint3" onMouseDown="hidePoints();" style="position:absolute; font-size:12px; left:136px; top:101px; z-index:400; display:none;">⊙</span>
<span id="tPoint4" onMouseDown="hidePoints();" style="position:absolute; font-size:12px; left:60px; top:76px; z-index:400; display:none;">⊙</span>
<span id="tPoint5" onMouseDown="hidePoints();" style="position:absolute; font-size:12px; left:36px; top:156px; z-index:400; display:none;">⊙</span>
</td>
<td height="40" colspan="5" align="center" nowrap class="CustomerText">模式:
<select name="tModer" class="Buttons" id="tModer" style="width:100px;" onChange="changeColorMode();">
<option value="1" selected>普通选色</option>
<option value="2">反相选色</option>
<option value="3">RGB对比选色</option>
<option value="4">矩阵选色</option>
<option value="5">五角星选色</option>
</select></td>
</tr>
<tr>
<td id="tLine1" align="center">
<span id="tPlantz1" style="position:absolute; top:230px; left: 275px;" class="CustomerText">＞</span>
<table width="15" height="160" border="0" cellpadding="0" cellspacing="0" id="tColorMode1" style="background:rgb(255,0,0);">
<tr>
<td valign="top"><span onClick="tColorHchange(true,1);" onMouseMove="tColorHchange(false,1);if(event.button==1) tColorHchange(true,1)" style="width:15px; height:161px; background:rgb(0,0,0); filter:alpha(opacity=100,finishopacity=0,style=1,startX=0,startY=0,finishX=0,finishY=100); z-index:30;"/>
</td>
</tr>
</table></td><td id="tLine2" align="center" style="display:none;">
<span id="tPlantz2" style="position:absolute; top:230px; left: 236px;" class="CustomerText">＞</span>
<table width="15" height="160" border="0" cellpadding="0" cellspacing="0" id="tColorMode2" style="background:rgb(255,0,0);">
<tr>
<td valign="top"><span onClick="tColorHchange(true,2);" onMouseMove="tColorHchange(false,2);if(event.button==1) tColorHchange(true,2)" id="tPlant2" style="width:15px; height:161px; background:rgb(0,0,0); filter:alpha(opacity=100,finishopacity=0,style=1,startX=0,startY=0,finishX=0,finishY=100);"/></td>
</tr>
</table></td>
<td id="tLine3" align="center" style="display:none;"><span id="tPlantz3" style="position:absolute; top:230px; left: 274px;" class="CustomerText">＞</span><table width="15" height="160" border="0" cellpadding="0" cellspacing="0" id="tColorMode3" style="background:rgb(255,0,0);">
<tr>
<td valign="top"><span onClick="tColorHchange(true,3);" onMouseMove="tColorHchange(false,3);if(event.button==1) tColorHchange(true,3)" id="tPlant3" style="width:15px; height:161px; background:rgb(0,0,0); filter:alpha(opacity=100,finishopacity=0,style=1,startX=0,startY=0,finishX=0,finishY=100);"/></td>
</tr>
</table></td>
<td id="tLine4" align="center" style="display:none;"><span id="tPlantz4" style="position:absolute; top:230px; left: 312px;" class="CustomerText">＞</span><table width="15" height="160" border="0" cellpadding="0" cellspacing="0" id="tColorMode4" style="background:rgb(255,0,0);">
<tr>
<td valign="top"><span onClick="tColorHchange(true,4);" onMouseMove="tColorHchange(false,4);if(event.button==1) tColorHchange(true,4)" id="tPlant4" style="width:15px; height:161px; background:rgb(0,0,0); filter:alpha(opacity=100,finishopacity=0,style=1,startX=0,startY=0,finishX=0,finishY=100);"/></td>
</tr>
</table></td>
<td id="tLine5" align="center" style="display:none;"><span id="tPlantz5" style="position:absolute; top:230px; left: 351px;" class="CustomerText">＞</span><table width="15" height="160" border="0" cellpadding="0" cellspacing="0" id="tColorMode5" style="background:rgb(255,0,0);">
<tr>
<td valign="top"><span onClick="tColorHchange(true,5);" onMouseMove="tColorHchange(false,5);if(event.button==1) tColorHchange(true,5)" id="tPlant5" style="width:15px; height:161px; background:rgb(0,0,0); filter:alpha(opacity=100,finishopacity=0,style=1,startX=0,startY=0,finishX=0,finishY=100);"/></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="6"><table width="100%" height="40" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="18%" align="center" class="CustomerText">饱和度:</td>
<td width="82%"><table width="301" height="20" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" id="S4Line" style="background:rgb(255,255,255)"><span onMouseUp="tColorSchange(true);" onMouseMove="tColorSchange(false);if(event.button==1) tColorSchange(true);" id="tColorS" style="position:absolute; width:301px; height:20px; background:rgb(255,0,0); filter:alpha(opacity=100,finishopacity=0,style=1);"></span>
<span id="tColorSz" class="CustomerText" style="position:absolute; width:40px; top:277px; left: 67px;">∧240</span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table> </td>
<td width="10%" align="right" class="CustomerText">色调:</td>
<td width="13%"><input name="H4" type="text" class="TCBox" id="H4" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">饱和度:</td>
<td width="13%"><input name="S4" type="text" class="TCBox" id="S4" value="240" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">亮度:</td>
<td width="13%"><input name="V4" type="text" class="TCBox" id="V4" value="240" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">红:</td>
<td width="13%"><input name="R4" type="text" class="TCBox" id="R4" value="255" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">绿:</td>
<td width="13%"><input name="G4" type="text" class="TCBox" id="G4" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">蓝:</td>
<td width="13%"><input name="B4" type="text" class="TCBox" id="B4" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right" class="CustomerText">颜色:</td>
<td width="13%"><input name="Color4HTML" type="text" class="TCBox" id="Color4HTML" value="#FF0000" size="7" maxlength="7"></td>
</tr>
<tr>
<td colspan="2" align="center"><table width="100" height="60" border="0" cellpadding="0" cellspacing="1">
<tr align="center">
<td class="CustomerText">颜色</td>
<td class="CustomerText">选择</td>
</tr>
<tr>
<td id="tColor1" height="40" class="TCBox" style="background:rgb(255,0,0);"> </td>
<td id="tColor2" height="40" class="TCBox" style="background:rgb(255,0,0);"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="500" height="260" border="0" cellpadding="0" cellspacing="0" id="Title5" style="display:none;">
<tr>
<td valign="top"><div align=center>
<br/><fieldset class="CustomerText" style="height:230px; width:380px;"><legend class="CustomerText" style="width:88px;"><div align="center">基本颜色色盘</div></legend>
<script language="javascript">
writeColorTable();
</script>
</fieldset></div></td>
<td width="115"><table width="100%" height="200" border="0" cellpadding="2" cellspacing="1">
<tr class="CustomerText">
<td width="43%" align="right">红:</td>
<td width="57%"><input name="R5" type="text" class="TCBox" id="S53" value="255" size="5" maxlength="3"></td>
</tr>
<tr class="CustomerText">
<td align="right">绿:</td>
<td><input name="G5" type="text" class="TCBox" id="S54" value="0" size="5" maxlength="3"></td>
</tr>
<tr class="CustomerText">
<td align="right">蓝:</td>
<td><input name="B5" type="text" class="TCBox" id="S55" value="0" size="5" maxlength="3"></td>
</tr>
<tr class="CustomerText">
<td align="right">颜色:</td>
<td><input name="Color5HTML" type="text" class="TCBox" id="Color5HTML" value="#FF0000" size="7" maxlength="7"></td>
</tr>
<tr align="center" class="CustomerText">
<td height="70" colspan="2"><table width="100" height="60" border="0" cellpadding="0" cellspacing="1">
<tr align="center">
<td class="CustomerText">颜色</td>
<td class="CustomerText">选择</td>
</tr>
<tr>
<td id="qColor1" height="40" class="TCBox" style="background:rgb(255,0,0);"> </td>
<td id="qColor2" height="40" class="TCBox" style="background:rgb(255,0,0);"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="500" height="260" border="0" cellpadding="0" cellspacing="0" id="Title6" style="display:none;">
<tr>
<td align="center"><table width="400" border="0" cellspacing="1" cellpadding="4">
<tr class="CustomerText">
<td colspan="2" style="color:#990000;">Shake-JS取色控件</td>
</tr>
<tr class="CustomerText">
<td align="right">作者:</td>
<td style="color:#990000;">动感Shake</td>
</tr>
<tr class="CustomerText">
<td align="right">QQ:</td>
<td style="color:#990000;">6090900</td>
</tr>
<tr class="CustomerText">
<td align="right">Email:</td>
<td><a href="mailto:[email protected]">[email protected]</a></td>
</tr>
<tr class="CustomerText">
<td align="right">版本:</td>
<td style="color:#990000;">1.0.0.1 Build1225</td>
</tr>
<tr class="CustomerText">
<td colspan="2"> 版权声明:
您可以自由使用或传播本程序，自由引用本程序中的范例，但必须保留完整的版权信息。
如果您需要修改程序进行二次开发，开发后的版权说明应包含有以下语句：“本程序由Shake-JS取色控件修改”(或其它语言的同义翻译)，修改后的程序产生的纠纷及导致的后果，与原作者无关。</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="100" align="center" valign="top" class="ColorFoot"><table width="98%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="65%" rowspan="2">
<fieldset style="height:90px;">
<legend class="CustomerText">[自定义颜色]</legend>
<table width="98%" style="cursor:default;" border="0" align="center" cellpadding="0" cellspacing="1" id="CustomerColor">
<tr>
<td class="TCBoxSelect" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
</tr>
<tr>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
</tr>
<tr>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
</tr>
<tr>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
<td class="TCBox" onMouseUp="CustomerColorSelect();"> </td>
</tr>
</table>
</fieldset></td>
<td colspan="2" align="center" valign="middle"><input style="width:95%;" onClick="this.blur();addCustomerColor();" id="addButton" type="button" class="Buttons" value="添加到自定义颜色"></td>
</tr>
<tr>
<td width="17%" align="center" valign="middle"><input onClick="this.blur();window.returnValue=WinReturnValue.value;window.close();" type="button" class="Buttons" value="确 定"></td>
<td width="18%" align="center" valign="middle"><input onClick="this.blur();window.close();" type="button" class="Buttons" value="取 消"></td>
</tr>
</table> </td>
</tr>
</table>
<input type="hidden" id="Color1V" value="120">
<input type="hidden" id="CustomerColorSelRow" value="1">
<input type="hidden" id="CustomerColorSelCell" value="1">
<input type="hidden" id="CurAa" value="85">
<input type="hidden" id="tPointColor1" value="0">
<input type="hidden" id="tPointColor2" value="72">
<input type="hidden" id="tPointColor3" value="144">
<input type="hidden" id="tPointColor4" value="216">
<input type="hidden" id="tPointColor5" value="288">
<input type="hidden" id="WinReturnValue" value="">
<script>
tModer.value = 1;
</script>
</body>
</html>