javascript顏色器_易賢網(wǎng)

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 腳本欄目

javascript顏色器

來源：易賢網(wǎng) 閱讀：1210 次日期：2014-08-13 17:11:31

溫馨提示：易賢網(wǎng)小編為您整理了“javascript顏色器”,方便廣大網(wǎng)友查閱！

javascript實現(xiàn)了顏色選擇并現(xiàn)出對應(yīng)的顏色值

效果演示 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技術(shù)專欄

上一篇：jquery核心函數(shù)

下一篇：onpropertychange

易賢網(wǎng)手機網(wǎng)站地址：javascript顏色器

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀腳本欄目