关闭

JavaScript颜色表

1175人阅读 评论(0) 收藏 举报
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

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

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:131058次
    • 积分:1792
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:48篇
    • 译文:0篇
    • 评论:19条