| 标题 | javascript颜色器 |
| 范文 | javascript实现了颜色选择并现出对应的颜色值 效果演示 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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。