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

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

javascript顏色器

來源：易賢網(wǎng) 閱讀：933 次日期：2016-06-30 09:46:58

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

javascript實(shí)現(xiàn)了顏色選擇并現(xiàn)出對(duì)應(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>

更多信息請(qǐng)查看腳本欄目

上一篇：js實(shí)現(xiàn)url解碼urldecode

下一篇：用hta實(shí)現(xiàn)的桌面漂浮flash

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

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

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