Shake_JS选色器

最新推荐文章于 2024-02-23 18:28:01 发布

happmaoo

最新推荐文章于 2024-02-23 18:28:01 发布

阅读量261

点赞数

文章标签： 360 C# C++ C JavaScript ViewUI

可能大家还对颜色的选取还很烦恼.
可是,圣诞节期间.一个新的颜色选择控件已经出场,
它,包含了仿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">

</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 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 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;" οnmοuseup="ePickColor(true);" οnmοusemοve="ePickColor(false);if(event.button==1) ePickColor(true);"></span>';
document.write(ColorMainLayer);
delete CX,CY,ColorMainLayer,SevenColor,i;
}

//=====[拾色器]
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 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 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 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);
}