javascript颜色器

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

javascript颜色器

来源：易贤网阅读：863 次日期：2016-06-30 09:46:58

温馨提示：易贤网小编为您整理了“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>

上一篇：js实现url解码urldecode

下一篇：用hta实现的桌面漂浮flash

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

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