设为首页收藏本站

站长之家.源码之家.wap站长之家.wap源码之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 域名 空间 程序
查看: 2977|回复: 0

★Javascript网页颜色拾色器(ragb颜色/弹窗显示)★

[复制链接]
发表于 2015-2-2 17:57:45 | 显示全部楼层 |阅读模式
编写网页上时可能用到颜色拾色器,也就是选择颜色用的,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便。


<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
<span class="style1"></span>
<table border="0" cellspacing="1" cellpadding="3" width="350" align="center" bgcolor="#dddddd">
<tr bgcolor="#FFFFFF">
<td width="10%" align="center">
<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%" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-size:12px">用鼠标单击下面的颜色块,将弹出颜色值</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="10%" align="center">
  <table id="table1" border="0" cellspacing="1" cellpadding="0">
<script language="JavaScript">
for(i=0;i<=15;++i){
        document.write('<tr><td align="center" style="font:menu">'+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%" align="center">
<table id="table2" border="0" cellspacing="1" cellpadding="0">
<script language="JavaScript">
document.write('<tr><td></td>')
for(i=0;i<=15;++i){
        document.write('<td align="center" style="font:menu; ">'+ishex(i*17)+'</td>');
}
document.write('</tr>')
for(i=0;i<=15;++i){
        document.write('<tr>')
        document.write('<td align="center" style="font:menu;">'+ishex(i*17)+'</td>')
        for(j=0;j<=15;++j){
                  document.write('<td id="Rtd'+i+'and'+j+'" style="font:menu;" 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>
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

友情提示: 没有图片帖子!

申请友链 |Archiver | 站长之家讨论论坛

© 2012-2015 站长之家( 浙ICP备14006854号 ) GMT+8, 2019-7-22 13:42 , Processed in 0.294958 second(s), 36 queries . Powered by kuhack.net X3.2    

禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.如遇版权问题,请及时联系点击这里给我发消息

今天是: | 本站已经安全运行: //这个地方可以改颜色

低部图片

返回顶部