javascript源码之js实现的一个简单的网页拾色器

今天学习了window对象,跟着学习了一个简单的网页拾色器的demo,拿出来和大家分享。

主页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拾色器</title>
</head>
<body>
<h1>网页拾色器</h1>
    <script language="javascript">
    function colorpick(file){
        var rtn=window.showModalDialog("color.html","","dialogWidth:225px;dialogHeight:170px;status:no;help:no;scrolling=no;scrollbars=no;")
        if(rtn != null)
            file.style.background=rtn;
        return;
    }
    </script>
    <input type="text" name="color" id="color" size="3" readonly="yes" style="">
</body>
</html>

拾色器"color.html"页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>color</title>
</head>
<body>
    <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><tr>');
         for (var i = 0; i < 6; ++i) {
               if(i%3==0){
                   document.write('<tr>');
               }
              document.write('<td bgcolor="#FFFFFF">');
              Mtable(h[i]);
              document.write('</td>');
        }
           if(i%3==0){
               document.write('</tr>');
           }
         document.write('</tr></table>');
    }
    Mcube();
    </script>
</body>
</html>

 

posted on 2015-04-29 15:12  青则清  阅读(372)  评论(0)    收藏  举报

导航