网页拾色器

实例说明

在网站中经常需要用户自定义颜色来显示某些信息。这可以在网页添加一个拾色器来实现。

技术要点

在本实例中仅使用 216 种浏览器安全的颜色，即所谓的 Netscape 色块。这 216 种颜色分别代表 0、51、102、153、204 这 5 个颜色值以及每一种原色（即红、绿、蓝）。这些十进制数值对应的十六进制数分别为 0x00、0x33、0x66、0x99、0xCC 和 0xFF。在 HTML 的颜色属性中黑色是 #000000，纯红色是 #FF0000，纯绿色就是 #00FF00，纯蓝色是 #0000FF，而白色是 #FFFFFF。在实现网页拾色器时需要应用 JavaScript 数组。创建数组可以有以下三种方法。

1.无参数调用。

<span style="white-space:pre">    </span>var h = new Array()

2.指定数组前n个元素的值

var h = new Array(arglist)

3.指定具有的元素个数

var h = new Array(n)

实现过程

1.实现点击颜色框，弹出网页拾色器网页 index.html

<!DOCTYPE html>  
<html>  
    <head>  
    <meta charset="utf-8" />  
        <script type="text/jscript" language="javascript">  
            function pp(field)  
            {  
                var rtn = window.showModalDialog("color.html","","dialogWidth=220px;dialogHeight=200px;status=no;help=no;scrollbars=no")  
                if(rtn!=null)  
                {  
                    field.style.background= rtn  
                }  
                return;  
            }  
        </script>  
    </head>  
    <body>  
        <input type="text" readonly="yes" id="color" name="color" size=3 style="background:#000000" value = "" onclick = "pp(this)">  
    </body>  
</html>

2.网页拾色器 color.html

<script language="javascript">  
        var h = new Array(6);  
        h[0] = "FF";  
        h[1] = "CC";  
        h[2] = "99";  
        h[3] = "66";  
        h[4] = "33";  
        h[5] = "00";  
        function action(RGB)  
        {  
            parent.window.returnValue = "#"+RGB;  
            window.close();  
        }  
        function Mcell(R,G,B)  
        {  
            document.write('<td bgcolor="#'+R+G+B+'">');  
            document.write('<a href="#" onclick="action(\''+(R+G+B)+'\')">');  
            document.write('<img border=0 height=12 width=12\')"alt=\'#'+R+G+B+'\'>');  
            document.write('</a>');  
            document.write('</td>');  
        }  
        function Mtr(R,B)  
        {  
            document.write('<tr>');  
            for (var i = 0; i <6; ++i)  
            {  
                Mcell( R , h[i] , B );  
            }  
            document.write('</tr>');  
        }  
        function Mtable(B)  
        {  
            document.write('<table cellpadding=0 cellspacing=0 border=0>');  
            for(var i = 0;i<6;++i)  
            {  
                Mtr(h[i],B);  
            }  
            document.write('</table>')  
        }  
        function Mcube()  
        {  
            document.write('<table cellpadding=0 cellspacing=0 border=0>');  
            for(var i = 0;i<6;++i)  
            {  
                if(i%3 == 0)  
                {  
                    document.write('<tr>')  
                }  
                document.write('<td bgcolor=#000000">');  
                Mtable(h[i]);  
                document.write('</td>')  
                if(i%3==2)  
                {  
                    document.write('</tr>')  
                }  
            }  
            document.write('</table>');  
        }  
        Mcube();  
    </script>