码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-04-29 16:31:40      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:

今天学习了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>

 

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

标签:

原文地址:http://www.cnblogs.com/sunxiaorui/p/4466079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!