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>

时间: 2024-10-15 07:18:20

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

JavaScript特效实例012-网页拾色器

实例012                             网页拾色器 实例说明 在网站中经常需要用户自定义颜色来显示某些信息.这可以在网页添加一个拾色器来实现. 技术要点 在本实例中仅使用216种浏览器安全的颜色,即所谓的Netscape色块.这216种颜色分别代表0.51.102.153.204这5个颜色值以及每一种原色(即红.绿.蓝).这些十进制数值对应的十六进制数分别为0x00.0x33.0x66.0x99.0xCC和0xFF.在HTML的颜色属性中黑色是#000000,纯红色是

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

javascript源码阅读推荐

学习任何程序设计语言,看书都只是开始的一小步而已,多看别人写的代码,自己动手多写代码才能让自己更上一层楼.Javascript的语言使用更是如此,由于javascript运行环境是浏览器,长久以来JavaScript兼容性一直是web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.其结果就是很多网页不能在各种浏览器上都有一样的表现,甚至根本不能跨浏览器.但基本上都遵循ECMA-262.努力并坚持一定会提高的.来自http://furzoom.com/j

网页中tab标签切换分别用jquery和javascript源码实现

//HTML布局<ul id="tabTitle"> <li class="active">HTML5</li> <li>PHP</li> <li>Java</li> </ul> <div id="div1" style="display: block"> HTML5 </div> <div id=&q

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

【模块化编程】理解requireJS-实现一个简单的模块加载器

在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ...... 为了深入了解加载器,中间阅读过一点requireJS的源码,但对于很多同学来说,对加载器的实现依旧不太清楚 事实上不通过代码实现,单单凭阅读想理解一个库或者框架只能达到一知半解的地步,所以今天便来实现一个简单的加载器 加载器原理分析 分与合 事实上,一个程序运行需要完整的模块,以下代码为例: 1

python实现的一个简单的网页爬虫

学习了下python,看了一个简单的网页爬虫:http://www.cnblogs.com/fnng/p/3576154.html 自己实现了一个简单的网页爬虫,获取豆瓣的最新电影信息. 爬虫主要是获取页面,然后对页面进行解析,解析出自己所需要的信息进行进一步分析和挖掘. 首先需要学习python的正则表达式:http://www.cnblogs.com/fnng/archive/2013/05/20/3089816.html 解析的url:http://movie.douban.com/ 查看

jmeter压力测试的简单实例+badboy脚本录制(一个简单的网页用户登录测试的结果)

JMeter的安装:在网上下载,在下载后的zip解压后,在bin目录下找到JMeter.bat文件,双击就可以运行JMeter. http://jmeter.apache.org/ 在使用jmeter前要先下载jdk包,配置java环境.(参见Java环境配置教程) 配置完成后在运行窗口检查一下java -version确定java环境配置完成. 一.利用badboy进行自动脚本录制 下载BadboyInstaller-2.2.5.exe 并安装 下载地址:http://download.csd

Html+css 一个简单的网页模板

一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <title>网页</title> 6 <meta charset="UTF-8&qu