| 标题 | JS实现的网页上的颜色拾色器 |
| 内容 | 这篇文章主要介绍了JS实现网页上的颜色拾色器,需要的朋友可以参考下 使用Js代码编写一个网页上用的颜色拾色器，也就是选择颜色用的，用鼠标单击任意颜色块,将弹出颜色值，当你想使用某种颜色而不知道颜色值的时候，用这个小特效可以告诉你颜色值是多少，比较方便。 代码如下: <html> <head> <title>颜色拾色器</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- .style1 {color: #FFFFFF} --> </style> </head> <body> <span></span> <table cellspacing="1" cellpadding="3" width="350" bgcolor="#dddddd"> <tr bgcolor="#FFFFFF"> <td width="10%"> <select name="select1" onchange="selectmenu(this.value)"> <option value="1" selected>红</option> <option value="2">绿</option> <option value="3">蓝</option> <option value="4">灰</option> </select> </td> <td width="90%"> <table cellspacing="0" cellpadding="0"> <tr> <td>用鼠标单击下面的颜色块,将弹出颜色值</td> </tr> </table> </td> </tr> <tr bgcolor="#FFFFFF"> <td width="10%"> <table id="table1" cellspacing="1" cellpadding="0"> <script language="JavaScript"> for(i=0;i<=15;++i){ document.write('<tr><td>'+ishex(i*17) +'</td><td id="Ltd' + i +'" bgcolor="rgb('+ (i*17) + ',0,0)" width="15" height="15" onclick="changeright(this.num)"></td></tr>') document.all['Ltd' + i].num=i } function ishex(which){ return which.toString(16); } </script> </table></td> <td width="90%"> <table id="table2" cellspacing="1" cellpadding="0"> <script language="JavaScript"> document.write('<tr><td></td>') for(i=0;i<=15;++i){ document.write('<td>'+ishex(i*17)+'</td>'); } document.write('</tr>') for(i=0;i<=15;++i){ document.write('<tr>') document.write('<td>'+ishex(i*17)+'</td>') for(j=0;j<=15;++j){ document.write('<td id="Rtd'+i+'and'+j+'" bgcolor="rgb(0,'+(i*17)+','+(j*17)+')" width="15" height="15" onclick="clickright(this)"></td>'); } document.write('</tr>') } </script> </table> </td> </tr> </table> <script language="JavaScript"> function selectmenu(which){ switch(which){ case '1' :leftR();break; case '2' :leftG();break; case '3' :leftB();break; case '4' :leftA();break; } } function leftR(){ for(i=0;i<=15;++i){ document.all['Ltd'+i].bgColor='rgb('+(i*17)+',0,0)'; } rightR(0) } function leftG(){ for(i=0;i<=15;++i){ document.all['Ltd'+i].bgColor='rgb(0,'+ (i*17) + ',0)'; } rightG(0) } function leftB(){ for(i=0;i<=15;++i){ document.all['Ltd'+i].bgColor='rgb(0,0,'+(i*17)+')'; } rightB(0) } function leftA(){ for(i=0;i<=15;++i){ document.all['Ltd'+i].bgColor='rgb('+(i*17)+','+(i*17)+','+(i*17)+')'; } rightA() } function rightR(which){ for(i=0;i<=15;++i){ for(j=0;j<=15;++j){ document.all['Rtd'+i+'and'+j].bgColor='rgb('+(which*17)+','+(i*17)+','+(j*17)+')'; } } } function rightG(which){ for(i=0;i<=15;++i){ for(j=0;j<=15;++j){ document.all['Rtd'+i+'and'+j].bgColor='rgb('+(i*17)+','+(which*17)+','+(j*17)+')'; } } } function rightB(which){ for(i=0;i<=15;++i){ for(j=0;j<=15;++j){ document.all['Rtd'+ i+'and'+j].bgColor='rgb('+(i*17)+','+(j*17)+','+(which*17)+')'; } } } function rightA(){ for(i=0;i<=15;++i){ for(j=0;j<=15;++j){ document.all['Rtd'+i+'and'+j].bgColor='rgb('+(i*16+j)+','+(i*16+j)+','+(i*16+j)+')'; } } } function clickright(which){ alert(which.bgColor) } function changeright(which){ switch(select1.value){ case '1' :rightR(which);break; case '2' :rightG(which);break; case '3' :rightB(which);break; } } </script> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。