| 标题 | 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;"> <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><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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。