位置:首页 » 技术 » JavaScript奇效实例012-网页拾色器

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

日期:2015-05-01 阅读:0num
Advertisement

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

实例012 网页拾色器

实例说明

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

技术要点

在本实例中仅使用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>

注:style标签的内容为css的知识,我们关注的是script标签内的内容。

这样我们的这个实例就做好了。

相关文章
  • JavaScript奇效实例012-网页拾色器

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

  • jQuery soColorPacker 网页拾色器

    未采用生僻的jquery特性,能兼容jquery1.2.6以上所有版本 实例预览 引入文件 <link type="text/css" rel="stylesheet" media="all" href="soColorPacker/css/style.css" /> <script type="text/javascript" src="jquery1.8.0.min.js&q

  • JS实现的网页上的颜色拾色器

    使用Js代码编写一个网页上用的颜色拾色器,也就是选择颜色用的,用鼠标单击任意颜色块,将弹出颜色值,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便. 颜色拾色器 红 绿 蓝 灰 用鼠标单击下面的颜色块,将弹出颜色值 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • iOS软件iWheelColor:装在口袋里的拾色器 iOS软件iWheelColor:装在口袋里的拾色器

    颜色代码对于程序员和网页设计师来说非常重要,但如果不是在电脑旁,那么多的颜色代码一定不好记,也不容易查看效果.所以就有贴心的国外开发商推出了一款名为iWheelColor的辅助软件. iWheelColor 点击进入下载界面 iWheelColor iWheelColor是一款拾色器软件,它可以让平面设计师.程序员和网页设计师等工作者非常直观和正确的找到颜色组合.我们在软件的主界面上可 以看到一个色彩轮,可以随意用手去触摸滑动或是改变.iWheelColor既支持2种颜色的互补,也支持三个颜色的

  • JQuery 拾色器插件发布-jquery.icolor.js JQuery 拾色器插件发布-jquery.icolor.js

    以前我一直用的那个(eyecon.ro) 功能完整也简易,但是不尽符合上面的要求,于是 google了N下,结果没找到现成的jquery拾色器插件很好的支持以下功能: 简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值 于是我写了icolor这个插件,除了支持上面的要求,还有别的一些特性如下: 1,默认提供的色值为"常用的浏览器安全的色值".相当于整合了下面最后一个prototype版本的颜色拾取器.关于浏览器安全色值,可参考维基文档http://en

  • 用纯js打造拾色器无法实现循环点击onclick

    用纯js制作拾色器无法实现循环点击onclick 网上是有很多拾色器代码,但是我是新手,想用纯js制作拾色器,代码如下. 问题是我如果一个一个触发onclick事件内容输出没有问题,但是假如for语句,就提示undefined <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container{

  • JavaScript奇效实例010-弹出网页模式对话框

    JavaScript特效实例010-弹出网页模式对话框 实例010 弹出网页模式对话框 实例说明 弹出一个指定大小的网页模式对话框. 技术要点 本实例主要应用window对象的showModalDialog()方法,该方法用于弹出网页(模式)对话框,其语法如下. variant = object.showModalDialog(sURL[,vArguments[,sFeatures]]) 参数说明. 1.sURL: 指定URL文件地址. 2.vArguments: 用于向网页传递参数,传递参数的

  • JavaScript奇效实例011-弹出全屏显示的网页模式对话框

    JavaScript特效实例011-弹出全屏显示的网页模式对话框 实例011 弹出全屏显示的网页模式对话框 实例说明 弹出全屏显示的网页模式对话框,用户关闭之前不能浏览网站的其他内容. 技术要点 本实例主要应用screen对象的width.height属性和window对象的showModalDialog()方法实现.其实还有一种方法打开网页对话框,即showModelessDialog()方法. 使用showModalDialog()与showModelessDialog()方法的区别在于,s

  • JavaScript奇效实例006-弹出的窗口之Cookie控制

    JavaScript特效实例006-弹出的窗口之Cookie控制 实例006 弹出的窗口之Cookie控制 实例说明 为了让相同的广告信息不在每次打该开网页时都弹出,而只在第一次打开该网页时弹出. 技术要点 Cookie是网站在访问者硬盘上存储的一些定制的信息段.通过浏览器,网页可以实现对Cookie的存储.获取和删除.Cookie的目的只有一个,即记录访问者的个体信息.在开始使用Cookie前,我们需要知道下面的规则. 浏览器可以存储的总Cookie数量不能超过300个,每个服务器不得超过20

  • JavaScript奇效实例005-控制弹出窗口居中显示

    JavaScript特效实例005-控制弹出窗口居中显示 实例005 控制弹出窗口居中显示 实例说明 点击页面上的按钮,弹出窗口,并将窗口居中显示. 技术要点 本例首先应用JavaScript中的window对象的open()方法,打开指定大小的新窗口,然后通过screen对象,获取屏幕分辨率,再根据获取的值通过window对象的moveTo()方法,将新窗口移动到屏幕居中位置. moveTo()方法将窗口移动到指定坐标(x,y)处,其语法格式如下. window.moveTo(x,y) 其中,

  • JavaScript奇效实例008-关闭弹出的窗口时,刷新父窗口

    JavaScript特效实例008-关闭弹出的窗口时,刷新父窗口 实例008 关闭弹出的窗口时,刷新父窗口 实例说明 关闭弹出的窗口时,同时刷新父窗口,一般用来使父窗口获取最新的数据. 技术要点 本实例主要应用window.open()语句打开新窗口,并在新窗口中应用opener属性,该属性返回一个引用,用于指定打开本窗口的窗口对象. 语法: window.opener window.opener.方法 window.opener.属性 功能:返回的是一个窗口对象.opener属性与打开该窗口的

  • JavaScript奇效实例014-页面自动滚动

    JavaScript特效实例014-页面自动滚动 实例014 页面自动滚动 实例说明 本实例实现在打开页面,当页面出现纵向滚动条时,页面中的内容将从上向下进行滚动. 技术要点 本例主要是使用window对象的scroll()方法指定窗口的当前位置.下面对scroll()方法进行详细说明. scroll()方法的语法格式: scroll(x,y); 参数说明如下. 1.x:屏幕的横向坐标 2.y屏幕的纵向坐标 功能:指定窗口滚动坐标的位置. 实现过程 用于实现功能的主页面index.html. <

  • JavaScript奇效实例013-日期选择器

    JavaScript特效实例013-日期选择器 实例013 日期选择器 实例说明 弹出日期选择器来供用户来选择日期. 技术要点 本例主要使用window对象的showModalDialog()方法实现. 实现过程 (1)用来弹出日期选择器的主页面.点击图片弹出日期选择器,然后在文本框输出选择的日期. <!DOCTYPE html> <html> <head> <title>日期选择器</title> <meta charset="

  • JavaScript奇效实例018-下降式浏览器

    JavaScript特效实例018-下降式浏览器 实例018 下降式浏览器 实例说明 本实例是在窗口打开时,将整个窗口放在屏幕的最上面,使窗口无法在屏幕中进行显示,然后动态地使窗口进行下移,直到窗口显示在屏幕的左上角为止. 技术要点 本实例主要应用了screen对象的availHesht属性来获得当前屏幕工作区的高度,并用window对象的moveBy()方法使窗口自动下移.下面对window对象的moveBy()方法进行详细的介绍. moveBy()方法的语法格式: window.moveBy

  • JavaScript奇效实例007-为弹出的窗口加入关闭按钮

    JavaScript特效实例007-为弹出的窗口加入关闭按钮 实例007 为弹出的窗口加入关闭按钮 实例说明 在弹出的窗口中加入关闭按钮,点击后弹出的窗口关闭. 技术要点 本实例主要应用window对象的close()方法实现.close()方法的语法如下. window.close() 功能:window对象的close()方法用于自动关闭浏览器窗口. 实现过程 (1)要弹出的窗口且是功能实现界面New.html. <html> <head> <meta charset=&

  • JavaScript奇效实例002-定时打开窗口

    JavaScript特效实例002-定时打开窗口 实例002 定时打开窗口 实例说明 本实例要在指定的时间后打开窗口. 技术要点 主要应用window对象setTimeout()方法实现定时打开窗口. setTime()方法的语法格式如下. <span style="font-size:14px;">setTimeout(function,milliseconds)</span> 参数说明如下. function:要调用的JavaScript自定义函数名称. m

  • JavaScript奇效实例001-打开新窗口显示广告信息

    JavaScript特效实例001-打开新窗口显示广告信息 实例001 打开新窗口显示广告信息 实例说明 本实例要在窗口每次被加载的时候弹出一个广告对话框. 技术要点 本实例主要应用JavaScript的window对象. window对象的常用方法 方法 说明 alert() 弹出一个警告对话框 confirm() 在确认对话框中显示指定的字符串 prompt() 弹出一个提示对话框 close() 关闭被引用的窗口 focus() 将被引用的窗口放在所有打开窗口的前面 open() 打开新浏

  • Linux下拾色器:功能强大的gpick Linux下拾色器:功能强大的gpick

    以往在 Linux 下要拾个颜色啥的我一直用 gcolor2 应付着.不过话说回来,gcolor2 的功能实在有些弱.现在有了功能更加强大的 gpick,gcolor2 可以正式"下岗"咯. 且让我们来看看 gpick 有些啥好功能: 在放大的屏幕区域中,按空格键即可快速取色: 为拾取的颜色自动命名: 能够将拾取的颜色以不同格式拷贝到剪贴板,目前包括十六进制.RGB 及 HSL: 可以将拾取的颜色导出为调色板,支持 gpl.ase.mtl 等格式,以供 GIMP.Inkscape 等程

  • HTML 拾色器

    获取 暗/明 渐变颜色效果.

  • JWPlayer网页html5播放器使用实例

    本文章来给各位同学介绍一下关于JWPlayer网页html5播放器使用实例,希望有需要学习JWPlayer播放器的朋友可进入参考. 源代码也很简单 代码如下 复制代码 <script type="text/javascript" src="jwplayer.js"></script> <script type="text/javascript">jwplayer.key="81vjyJmC9lEWkQ

最新文章
  • 哪位了解 macbook pro 的升级周期的?

    打算入一个 pro, 不过不知道现在买是不是合适,别我刚买,丫下个月就升级了啥的. --cut-- Totoria在2014-09-15 00:13:3回答到: 至少还有半年 haoji在2014-09-15 00:16:4回答到: http://buyersguide.macrumors.com/#Mac 7colcor在2014-09-15 02:10:3回答到: 请看该页右侧 yyfearth在2014-09-15 03:34:1回答到: 刚刚才升级的 应该半年内不会再升级了 不过搞不好会

  • HelloTalk 后端 PHP 工程师招聘

    http://www.hellotalk.com HelloTalk是全球P2P语言学习平台APP,一款国际化的语言学习类,全球用户百万级别. 用户分布在200过个国家和地区. 在这里我们需要你的聪明才智来解决世界各地语言学习者的问题. (还有YY大牛指导哦) 岗位要求: 1.有1年以上的web开发经验: 2.具备良好的PHP编码规范. 熟悉javascript.html5.css 3.MySQL数据库应用设计.开发和优化经验 4.有一定的英文基础,能阅读英文文档及资料 5.能熟练使用Linux

  • edge浏览器收藏夹位置在哪 edge浏览器收藏夹位置在哪

    升级win10后相信不少朋友被微软Edge浏览器"收藏夹"本地位置虐心了,不再是存放在原先的"收藏夹"文件夹中了.下面小编就为大家分享一下怎么找到edge浏览器收藏夹位置 相比IE,微软Edge浏览器速度很快,尤其JavaScript运算性能强大,原生内置了OneNote.Cortana系统级网络服务,可以快速实现阅读.分享.笔记等工作.小编在网上搜索了一些网页给的地址大家都说是这个大家可以试试的: C:/Users/用户名/AppData/Local/Packag

  • 古代第一保姆万贵妃 如何让小她17岁的皇帝欲罢不能 古代第一保姆万贵妃 如何让小她17岁的皇帝欲罢不能

    明宪宗朱见深是一位比较特殊的皇帝,他为人软弱,没有主见,而且口吃,是一位治国和治家都一塌糊涂的男人,更让人不可思议的是他竟然还对一个大他19岁的保姆钟爱一生,这位保姆就是明代历史上大名鼎鼎的万贵妃.翻看一下万贵妃的历史,我们会发现她的一生是极富传奇色彩的,她最后成为一手遮天的后宫之主,既有偶然因素,更有必然原因. 万贵妃名叫万贞儿,年仅4岁时就被遭贬官谪居的父亲送进皇宫做了宫女.聪明乖巧的万贞儿深得明宣宗皇后孙氏的喜爱,长到19岁时,她被已经升级为太后的孙氏派去照顾年仅两岁,且失了势的太子朱见深

  • 《银河英雄传说7》简单修改秘籍

    作者:幸福街 还是用FPE2001,把游戏切换到窗口模式(我的窗口模式巨卡,全屏就没有问题),打开fpe2001,选择游戏进程,在游戏中查看你要改的人的属性,按照统帅,机动,炮击,空战,防御记下数值,在pfe中搜索5个数值的8进制值,然后修改就ok啦! 举例子:杨:统帅17,机动15,炮击17,空战15,防御18,在fpe中搜索17,15,17,15,18,一般会搜到2个地址,选择第一个地址点编辑,在内存中修改前5个数值就是人物属性啦!

  • 酷派锋尚MAX开发者模式怎么开启 酷派锋尚MAX开发者模式怎么开启

    最近有很多网友跟小编讲,他们不知道怎么开启开发者模式,这样的话就导致我们很多操作都弄不了了,怎么办,别急,下面小编即将为大家讲酷派锋尚MAX开发者模式怎么开的! 1)首先我们先打开[设置],然后找到[关于手机],打开后我们再连续点击[版本号]七次.(如下图) 2)最后我们就可以看到[开发者模式]了.(如下图)

  • 浴室柜组合搭配技巧 浴室柜组合搭配技巧

    浴室柜组合主要是指放在浴室的储物柜即储物.置物.收纳和洗漱等功能为一体的柜子,浴室镜,台面.龙头等卫浴用品的组合.浴室柜组合该如何搭配才能在视觉上达到最好的效果图呢? 组合形式:浴室柜不像厨柜那样有比较一致的定式,你可以在浴室的任何地方打造各种式样的浴柜;它可以是角形柜.弧形柜或箱形柜,也可以是放在门后的条形柜或可拆拼的组合式浴柜.但它们一定要与浴室的整体设计相呼应,无论从材质色彩到形状大小都要与其它设施协调一致,否则会给人画蛇添足的感觉. 你可以根据浴室面积的不同而设计不同规格的浴柜,传统的浴

  • JavaScript 浏览器验证代码

    我们这里了最全的JavaScript 浏览器验证代码也提供了最精短的浏览器验证代码,下面来看看我们利用ie bug来实现世界上最短浏览判决代码吧. var browser = {}; var useragent = navigator.useragent.tolowercase(); alert(useragent); browser.ie = window.activexobject && useragent.indexof('msie') != -1 && userag

  • IOS开发中遇到的问题及解决方法

    1.报错Switch is in protect scope 解决方法: switch (sender.tag) { case 1: //block方式添加动画,这里需要加上大括号解决报错:Switch is in protect scope { center.y -= 20; [UIView animateWithDuration:1 animations:^{ self.buttonImage.center = center; }]; } break; } 2.使用UITextView输入框

  • flashback drop 误删除的表后的回复及对回收站中表的操作

    flashback drop 误删除的表后的恢复及对回收站中表的操作 1.误删除表,使用flashback drop功能找回 SQL> select * from tab; TNAME TABTYPE CLUSTERID ------------------------------ ------- ---------- TEST TABLE SQL> select * from test; A ---------- 1 2 3 4 5 6 7 8 0. SQL> show paramet

热门推荐
  • 小米平板怎么刷机? 小米平板怎么刷机? 一般来说卡刷是在RRECOVERY中进行,而recovery其实就是简单的恢复系统,下图是官方的RECOVERY. 统一小编提示:刷机前,备份好小米平板里面的资料.(比如联系人.通话记录.安装的软件等.放到储存卡的不用备份不会清除). 刷机步骤 1.在官方下载,下载完之后改名update.zip并拷入内存卡的根目录下(这里注意必须考入microSD卡的根目录下,内部存储貌似找不到刷机包). 2.进入Recovery (方法:关机,然后 音量上+电源). 3.清除数据:Recovery -> 清除
  • 微软Xbox今日正式上线 电视游戏市场开启 微软Xbox今日正式上线 电视游戏市场开启 9月29日信息,计划23日发布的国行版微软Xbox今日凌晨正式上市销售.从销售渠道方面获悉,尽管Xbox发布延迟,但作为首款通过审查的游戏主机,得到了不少玩家的追捧.以苏宁O2O双线渠道为例,截至昨晚7时,Xbox One国行版预订量已超过2万台. 另外,在延迟近一周发售后,此次国行Xbox主机所加载的游戏数目从之前的4款增加到10款,包括2款免费赠送的游戏....[查看详情]
  • 在FrontPage 中插入Flash动画 在FrontPage 中插入Flash动画 尽管FrontPage 2000和Flash同属于网页设计软件,但两者的兼容性不是很好.使用FrontPage 2000 中的"插入"菜单,无论是图片,还是文件,或者不能直接插入SWF文件,或者插入后无法正常显示,笔者通过探索.尝试,找到了以下4种办法,可以在FrontPage 2000 中使用Flash动画: 1.在Flash动画制作结束时,输出为GIF动画.如果要透明,必须在"Export GIF"对话框中,选中"Transparent"(如
  • 淘宝为什么屏蔽百度搜索 淘宝为什么屏蔽百度搜索 如果你经常在网上购物的话,当你通过百度搜索某一件商品,你有没有发现,从来没有出现过来自淘宝网的商品结果,如果你还没有注意到这个现象,你现在就可以搜索下试试,比如搜索"iphone手机"."平板电脑"等等.这就是因为百度搜索蜘蛛被淘宝网屏蔽了抓取,从而导致百度不能索引淘宝网数据,其实这已经不能够算是个新闻了,但是却值得我们思考下这个现象,淘宝为什么要屏蔽百度搜索呢? 上图表示的就是淘宝网的robots.txt文件的内容,淘宝网的这种写法的表示意思是:屏蔽百度蜘蛛抓取淘