javascript顏色器
來源:易賢網(wǎng) 閱讀:869 次 日期:2016-06-30 09:46:58
溫馨提示:易賢網(wǎng)小編為您整理了“javascript顏色器”,方便廣大網(wǎng)友查閱!

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

效果演示 javascript顏色器

<html>

<head>

<title>javascript顏色選擇</title>

<meta http-equiv=content-type content=text/html; charset=gb2312>

<style type=text/css>

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>

<body onselectstart=return false; style=margin: 0px;padding: 0px;>

<script language=javascript>

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>

<table cellspacing=0 cellpadding=0>

<tr> 

<td>    

<input type=text disabled=true size=9 id=showcolor style=background-color:#000000;disabled:true;><input type=text disabled=true size=15 id=selcolor value=#000000>

</td>

</tr>

</table>

<script language=javascript>

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>

更多信息請查看腳本欄目
易賢網(wǎng)手機網(wǎng)站地址:javascript顏色器
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)