javascript颜色器

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

javascript颜色器

来源：易贤网阅读：1107 次日期：2014-08-13 17:11:31

温馨提示：易贤网小编为您整理了“javascript颜色器”,方便广大网友查阅！

javascript实现了颜色选择并现出对应的颜色值

效果演示 javascript颜色器

<html>

<head>

<title>javascript颜色选择</title>

body{background-color: buttonface; }

input{font-size:9pt;font-family: "verdana,tahoma,arial,sans-serif";}

button{height:24px;font-size:10pt;font-family: "verdana,tahoma,arial,sans-serif";}

</style>

</head>

document.title="颜色选择"+ document.title;

var iW = 30;//共有6种颜色，每种颜色的宽为iW。iW*6为色带的宽。

var iH = '152';//iH为色带的高。

var iT =20;

var iL = 0;

//var iT = (document.body.offsetHeight-iH)/2;

var H,S,V;

var sr,sg,sb;

var curColor="#000000";

</script>

<tr>

<td>

</td>

</tr>

</table>

function SetColor(){

SelColor.value=curColor.toUpperCase();

ShowColor.style.background=curColor;

}

function HSV(){

var pX = event.offsetX;

var pY = event.offsetY;

var HalfH = parseInt(iH/2);

H = parseInt(pX*360/(iW*6));

if(event.offsetY < HalfH){

S = pY/HalfH;

V = 1;

}else{

S = 1;

V = (iH-pY)/HalfH;

}

HSVtoRGB();

rgb=RGB2HTML();

//HSV.value = 'H:'+H+' S:'+parseInt(S*100)+'% V:'+parseInt(V*100)+'%';

//RGB.value = 'R:'+sr+' G:'+sg+' B:'+sb;

SelColor.value="#"+rgb.toUpperCase();

ShowColor.style.background= '#'+rgb;

}

function HSVtoRGB(){

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;

}

sr = parseInt(r*255);

sg = parseInt(g*255);

sb = parseInt(b*255);

}

function RGB2HTML(){

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;

}

function finsh(){

window.returnValue = SelColor.value;

window.close();

}

function window.onload(){

var iHtml = '';

var RainBow = [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++){

var R1 = RainBow[i*3];

var G1 = RainBow[i*3+1];

var B1 = RainBow[i*3+2];

var R2 = RainBow[(i+1)*3];

var G2 = RainBow[(i+1)*3+1];

var B2 = RainBow[(i+1)*3+2];

iHtml += "<span style='position:absolute;left:"+(i*iW+iL)+";top:"+iT+";width:"+iW+";height:"+iH+";background:rgb("+R1+","+G1+","+B1+");'></span><span style='position:absolute;left:"+(i*iW+iL)+";top:"+iT+";width:"+iW+";height:"+iH+";background:rgb("+R2+","+G2+","+B2+");filter:alpha(opacity=0,finishopacity=100,Style=1);'></span>"

}

iHtml += "<span style=position:absolute;left:"+iL+";top:"+iT+";width:"+iW*6+";height:"+iH/2+";background:rgb(255,255,255);filter:alpha(opacity=100,finishOpacity=0,style=1,starty=0,finishy=100,startx=0,finishx=0)></span><span style=position:absolute;left:"+iL+";top:"+(iT+iH/2)+";width:"+iW*6+";height:"+iH/2+";background:rgb(0,0,0);filter:alpha(opacity=0,finishOpacity=100,style=1,starty=0,finishy=100,startx=0,finishx=0)></span><span style='cursor:crosshair;position:absolute;left:"+iL+";top:"+iT+";width:"+iW*6+";height:"+iH+";' onmousemove=HSV() ondblclick=finsh() onclick='curColor=SelColor.value' onmouseout=SetColor()></span>"

document.body.innerHTML+=iHtml;

SetColor();

}

</script>

</body>

</html>

更多信息请查看IT技术专栏

上一篇：jquery核心函数

下一篇：onpropertychange

易贤网手机网站地址：javascript颜色器

由于各方面情况的不断调整与变化，易贤网提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！