JavaScript颜色表

转载 2006年05月19日 16:11:00
Fireworks中选择颜色的时候,如图,当鼠标单击图中红线圈住的地方就会弹出一个颜色表,在颜色表中选取一种颜色后,图中红线圈住的地方就会变成选取的颜色,同时颜色表消失。
image

下面让我们用JavaScript在网页中也加入类似功能,实际效果和代码如下:
image
<script>
function findObj(n, d){
    var p,i,x;
    if(!d)d=document;
    if((p=n.indexOf("?"))>0 && parent.frames.length){
        d=parent.frames[n.substring(p+1)].document;
        n=n.substring(0,p);
    }
    if(!(x=d[n]) && d.all)x=d.all[n];
    for(i=0; !x && i<d.forms.length; i++)x=d.forms[i][n];
    for(i=0; !x && d.layers && i<d.layers.length; i++)x=findObj(n,d.layers[i].document);
    if(!x && d.getElementById)x=d.getElementById(n);
    return x;
}
function colorsa(c){
    findObj('colordiv').style.display='none';
    findObj('colortd').style.backgroundColor='#'+c;
    alert('#'+c); //修改此处可达到其他不同的效果
}
var hexch=new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
function ToHex(n){
    var h, l;
    n=Math.round(n);
    l=n%16;
    h=Math.floor((n / 16)) % 16;
    return (hexch[h]+hexch[l]);
}
function ToHex1(n){
    var l1;
    n=Math.round(n);
    l1=n % 16;
    return (hexch[l1]+hexch[l1]);
}
function wc(r, g, b, n){
    r=((r*16+r)*3*(15 - n)+0x80*n) / 15;
    g=((g*16+g)*3*(15 - n)+0x80*n) / 15;
    b=((b*16+b)*3*(15 - n)+0x80*n) / 15;
    document.write('<td width="8" bgcolor="#'+ToHex(r)+ToHex(g)+ToHex(b)+'" onclick="colorsa(/''+ToHex(r)+ToHex(g)+ToHex(b)+'/');" onmouseover="this.style.backgroundImage=/'url(color_bg.gif)/';" onmouseout="this.style.backgroundImage=/'/';"></td>');
}
var cnum=new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);
function colortabl(){
    for(i=0; i < 15; i ++){
        document.write('<table border="0" cellpadding="0" cellspacing="0"><tr>');
        document.write('<td bgcolor="#'+ToHex1(i)+ToHex1(i)+ToHex1(i)+'" height="8" width="8" onclick="colorsa(/''+ToHex1(i)+ToHex1(i)+ToHex1(i)+'/');" onmouseover="this.style.backgroundImage=/'url(color_bg.gif)/';" onmouseout="this.style.backgroundImage=/'/';"></td>')
        for(j=0; j < 30; j ++){
            n1=j % 5;
            n2=Math.floor(j / 5)*3;
            n3=n2+3;
            wc((cnum[n3]*n1+cnum[n2]*(5 - n1)),(cnum[n3+1]*n1+cnum[n2+1]*(5 - n1)),(cnum[n3+2]*n1+cnum[n2+2]*(5 - n1)), i);
        }
        document.writeln('</tr></table>');
    }
}
</script>
<div id="colordiv" style="display:none;position:absolute;z-index:5;" onmouseout="this.style.display='none';" onmouseover="this.style.display='';">
    <script type="text/JavaScript">colortabl();</script>
</div>
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#000000;" id="colortd" onclick="findObj('colordiv').style.display='';">
    <tr>
        <td><img src="color_ch.gif"></td>
    </tr>
</table>
</body>
</html>

需要的图片:
imagecolor_bg.gif
imagecolor_ch.gif

代码中注释的部分为单击颜色表中的颜色块时执行的动作,这里是弹出警告窗口,内容为选取的颜色代码,可以修改为其他效果。

相关文章推荐

rgb颜色表取色器.exe

  • 2015-01-23 11:41
  • 1.44MB
  • 下载

常用RGB颜色表

R G B 值   R G B 值   R G B 值 ...

网页中颜色表

  • 2012-12-24 11:19
  • 22KB
  • 下载

2012_RGB颜色表

  • 2013-04-09 14:09
  • 42KB
  • 下载

《高效学习OpenGL》 之 颜色表 glColorTable(),glColorTableParameter(),glCopyColorTable()

1.颜色表的种类 可以调用glEnable()单独启用各个颜色表 2.指定颜色表 glColorTable(GLenum target, GLenum InternelFormat...

RGB颜色表(全)

  • 2013-03-14 13:01
  • 296KB
  • 下载

颜色表,用于配色

  • 2012-02-03 09:17
  • 73KB
  • 下载

2012年C/C++ 颜色表代码

#include #include bool SetConsoleColor(WORD forceGroundColor, WORD backGroundColor); bool ...

android 常用RGB颜色表

  • 2014-10-16 20:45
  • 346KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)