位置:首页 » 技术 » 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

最新文章
  • PS4 爆出的 WebKit 漏洞终于有进展了

    曾开发过 PS4 webkit 漏洞. HomeBrew 以及 PS4 文件浏览器的黑客 CTurt 宣布已找到 PS4 核心漏洞,但为了保护漏洞并没有公开最终工作版本,但目前应该不高于 2.0 . 但我经过测试 2.57 版本仍然存在这个漏洞 当时 2.57 测试过 那个漏洞还存在 不知道现在 3.X 如何了 用 PS4 的内置浏览器打开 https://cturt.github.io/PS4-playground 点 Get PSN username 看看能不能读出你的 PSN 账号,如果可

  • 杨梅的营养价值及吃法 杨梅的营养价值及吃法

    杨梅的营养价值及吃法 杨梅,又名龙晴.朱红,因其形似水杨子.味道似梅子,因而取名杨梅.杨梅是我国特产水果之一,素有"初疑一颗值千金"之美誉,在吴越一带,又有"杨梅赛荔枝"之说.杨梅果实色泽鲜艳,汁液多,甜酸适口,营养价值高. 杨梅的营养价值 据测定:优质杨梅果肉的含糖量为12%-13%,含酸量为0.5%-1.1%,富含纤维素.矿质元素.维生素和一定量的蛋白质.脂肪.果胶及8种对人体有益的氨基酸,其果实中钙.磷.铁含量要高出其他水果10多倍. 杨梅的药用价值 杨梅有生

  • 巢蕨的功效与作用 巢蕨的功效与作用

    巢蕨是一种美丽的观赏性植物,它的株高在六十到一百二十百米之间,喜欢生长在温暖和潮湿的半阴环境中,在中国的分布范围很广,像广东.广西以及海南等地都比较常见,巢蕨除了可以供人观赏以外,还可以供人类食用,也可以入药,是一种功效与作用很多的特有植物. 巢蕨的功效与作用 1.巢蕨可以供人食用 巢蕨是一种可以供人类食用野生植物,它营养丰富有多种维生素和微量元素存在,像钾.铁以及钙等人体必须物质的含量都很高, 人们食用以后可以吸收营养提高身体健康水平,另外巢蕨中还有大量的膳食纤维,可以起到软化大便和加快大便排

  • 2015最新婚礼司仪主持词

    尊敬的各位来宾,亲爱的朋友们,公园*年*月*日,*先生和*小姐的新婚典礼,主持人**向全场所有来宾问好.致敬! 朋友们,如果说人生是岁月长河中的一幅长卷,那么我们今天将要为大家描绘的就是这幅长卷当中最具华美的篇章,如果说罗马假日是一场没有经过彩排的电影,那么我们今天故事的男女主人公必将是从荧幕当中走向生活的男女主角.关于永恒这个话题,我曾经问过我的爷爷,爷爷告诉我能够看到爱人的笑脸,这便是永恒;有一天我问我的妈妈什么才是永恒的爱恋,我的妈妈告诉我,用心去经营爱,用心去保护这个家,这就是永恒的爱恋

  • 德牧犬有眼屎怎么回事 德牧犬有眼屎怎么回事

    德牧犬有眼屎怎么回事? 眼屎要看是哪一种而定.如果出来是硬结(挂在眼角久了风干了不在此类)和干的糊状,可能眼睛有炎症或上火,如果是软糊状的,是虚热.一般从中医理论来讲,肝开窍于目,当肝火旺时眼睛就会发红并伴有眼屎. 一般平时注意及时清理,每天坚持用杭白菊泡水洗眼或者给宠物狗们饮用,同时可以用氯霉素眼药水点眼睛,(最好用宠物用的)一天两三次就可以了.坚持一段时间,就能看到明显的好转." 当觉得眼屎太黄浓的时候,用氯霉素眼水洗眼可防止长期眼屎过多造成青光眼,主要原因是德国牧羊犬太燥热了,可买人吃的抗

  • 草根创业者必过十道坎

    创业是很多人都在追求的一种工作方式,但只有在创业这条道路上认真走过的人才知道什么是创业.创业者的成功像一首美丽动听的歌,更像一场扣人心弦的电影,影片背后有着常人无法想像的心酸和苦楚.创业对于一个人的要求很多.很高,要想取得成功,笔者认为,创业者至少要跨越以下十道坎. 第一,收益坎. 很多老板在未创业之前都是公司的骨干,深得老板赏识,身价自然不菲,但是创业初期由于各种原因,辛辛苦苦一年,能够获得的收益还远远不如打工,甚至会"吃老本",这种收益的巨大落差是每一个初期创业者都必须面对和接受的

  • 电脑运行速度慢怎么办

    电脑运行速度慢的解决办法及分析 大多人刚开始装系统的时候,会发觉运行速度非常的快,但是用了一段时间后,感觉电脑运行速度越来越慢, 在此我把原因大致分析一下,另一个方面是硬件原因,,一个方面是软件原因. 硬件方面的原因: 一.硬盘坏道电脑长期使用后,对硬盘造成的磨损会很大,尤其像网吧一类长期开机和非正常关机的电脑,其硬盘损耗会更大,硬盘损坏一般都是从一小部分坏道开始的,然后逐渐的越坏越大,还有的硬盘是由于电源供电不好或硬盘质量不好而造成硬盘马达运行速度下降,也就是硬盘主板部分损坏. 大家平时要养成

  • DataGridView控件详细介绍

    1何为DataGridView 通过DataGridView控件,可以显示和编辑表格式的数据,而这些数据可以取自多种不同类型的数据源. DataGridView控件具有很高的的可配置性和可扩展性,提供了大量的属性.方法和事件,可以用来对该控件的外观和行为进行自定义.当你需要在WinForm应用程序中显示表格式数据时,可以优先考虑DataGridView(相比于DataGrid等其它控件).如果你要在小型网格中显示只读数据,或者允许用户编辑数以百万计的记录,DataGridView将为你提供一个易

  • LeetCode(一)Two Sum

    LeetCode(1)Two Sum 题目: Given an array of integers, find two numbers such that they add up to a specific target number. The function twoSum should return indices of the two numbers such that they add up to the target, where index1 must be less than in

  • 简介事物与隔离级别 简介事物与隔离级别

    事务的特性: 原子性(Atomicity) 事务中的所有操作要么全部执行,要么都不执行. www.2cto.com 一致性(Consistency) 事务执行前后数据库都处于一致的状态. 隔离性(Isolation) 多个事务执行都感觉不到其它事务在执行. 持久性(Durability) 一个事务一旦被提交,所有的修改将永久保存,即使系统故障也不丢失. 隔离级别: 读不提交--READUNCOMMITTED 脏读,可能读到脏数据. 读 提 交--READCOMMITTED 不可重复读,每次读到的

热门推荐
  • 突然发现我需要的表情管理软件早就存在了 突然发现我需要的表情管理软件早就存在了 应该不仅仅是表情图片管理,还有动图管理,管理的核心在于根据 Tag 迅速找到我想要的表情或动图,像 Evernote 那样.目前的 QQ ,微信等社交软件在你的表情 /动图多起来后找起来那是相当的麻烦. 几个月前发了这个贴 http://v2ex.com/t/204691 ,没找到答案 今天看到这个贴 http://v2ex.com/t/240205 ,提到了 Inboard 这个软件,突然就发现它就很契合我的这个需求,支持各种图片包括 Gif ,支持 Tag 管理,试用了一下直接可以直接拖图片
  • 手机QQ音乐大咖装怎么用? 手机QQ音乐大咖装怎么用? 最近QQ音乐因为中国好声音的感染,除了在音乐上与好声音同步,现在连主题也能够与好声音进行同步,使用大咖主题让你仿佛进入好声音的世界里.那么手机QQ音乐大咖装怎么用?下面小编就为大家介绍手机QQ音乐切换主题,一起来看看吧! 手机QQ音乐怎么切换大咖装皮肤? 1.如果你已经习惯了手机QQ音乐的默认系统主题,那么现在就让它开始变装吧 不管是大咖装还是其他系统主题,设置的方法都一样的,点击左上角的[更多] 2.更多设置的下面,底部有一个[个性主题]的选项,点击这里设置就对了 3.现在除了两个基本主题可以
  • 《饥荒》DLC海难实用MOD大全 《饥荒》DLC海难实用MOD大全 饥荒DLC海难实用MOD有哪些?饥荒海难中有非常多的MOD,下面小编为大家整理了非常实用的MOD大全,大家一起来看看吧,说不定就有你想要的呢! 显示食物属性 下载地址:点击进入 小地图 下载地址:点击进入 一键整理 下载地址:点击进入 死亡不删档 下载地址:点击进入 建筑几何网格 下载地址:点击进入 饥荒DLC海难实用MOD有哪些?饥荒海难中有非常多的MOD,下面小编为大家整理了非常实用的MOD大全,大家一起来看看吧,说不定就有你想要的呢! 显示食物属性 下载地址:点击进入 小地图 下载地址:点
  • 刺客信条4双重暗杀怎么用 刺客信条4双重暗杀怎么用 1.换到袖箭或者双刀,遇到基友组合的卫兵从后面靠近(可以跑起来操作更流畅),鼠标左键点一下轻松搞定. 刺客信条里面的敌人简直不叫敌人 是一群会移动的靶子.不追求100%同步的话玩起来毫无趣味,只能算是按键盘玩. 2.袖剑,两敌人并排在一起的情况下,不管他们是在走动还是站着不动,只要靠近他们身后(或者跑向他们?),按住高调键(4代默认是Shift键),然后只要距离够近两敌人就都会泛白,这时攻击即可双杀 3.果两个杂兵同时泛白, 就可以出手了, 如果两个杂兵站一起, 从中间跑过去也一样.
  • 想签了,求个比较吧解决思路 想签了,求个比较吧解决思路 想签了,求个比较吧 不想11.12月尝试国企银行了,今年互联网招人极少,学校里大部分人都是互联网0 offer,有小公司.中兴华为的offer又不甘心去,所以国企必然爆棚,而且国企群面偶然性太大,我也希望能够不荒废自己所学 一些小鱼小虾就不说了,只列如下四个 百度:研发,浏览器,北京 阿里巴巴:研发,阿里云,杭州 腾讯:后台研发,魔方工作室,深圳 公安部第一研究所:研发,通信,北京 待遇因为有保密,不便直接透露 反正三个互联网 工资 阿里>百度>腾讯 可能的奖金 腾讯>阿里>百度