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

最新文章
  • 2550清仓,Nexus 5 16G熊猫机,你值得拥有! 2550清仓,Nexus 5 16G熊猫机,你值得拥有!

    如你所见 白色的还没卖光 Google Play海淘原装带小票. 我放在房间 每天上班 都快忙忘掉了 还是赶紧出手吧 再不出手信用卡还款期都到了.... 上美图一张 QQ:1215357五叁 淘宝链接,要买请通知我改价格 http://2.taobao.com/item.htm?spm=2007.1000337.18.2.iK2GAA&id=36107126752 --cut-- P9在2013-12-14 16:53:5回答到: 不如海淘吧 cosyhe在2013-12-14 18:43:0回

  • 有科技博客招编辑的么 有科技博客招编辑的么

    前一段时间跳到IBM,在UNIX support team做了一个多月,感觉不适应这边的氛围,很压抑.每天机械的做着事情,开着无甚意义的会议,繁杂的流程,就连空闲时间看看GR也不允许... 作为一个重度GR使用者 时常看到不是很专业的国内科技博客报道 便想着自己能做点儿什么 有兴趣的可以mail:[email protected] 或者加我line ihacku --cut-- zolo在2013-04-13 18:26:2回答到: 前两天一个朋友的公司在招社区经理,公司主营业务是第三方Android

  • [北京] shujutang.com 招聘 Ruby/python/perl 脚本工程师 10~15K

    岗位要求: --熟练使用Ruby/python/perl等语言,并精通其中一种语言 --熟悉Linux/Unix环境 --了解基本算法与数据结构 --具备较强的逻辑思维能力.自学能力和沟通能力,乐于分享 --有大数据处理经验者优先 --熟悉正则表达式者优先 --具备一定的前端开发能力优先 岗位职责: --按照语音.图像工程师制作的实施规范处理数据 --根据需求开发独立程序支持项目实施 --数据统计.分析 邮箱: xumingtao#datatang.com 网址: www.shujutang.c

  • 搜索不到无线网络,无法配置此无线连接 搜索不到无线网络,无法配置此无线连接

    目前,笔记本电脑很多都自带802.11b/g无线网络适配器,不必再另外安装无线网卡即可连接到无线网络.但常常遇到这样的问题,未曾使用过 无线或者曾连接过某个无线网络的笔记本电脑会连接不到一个新的无线网络.其实这并非"问题",只不过需要使用无线管理工具做适当的操作.但这就引出了新的 问题,因为几乎所有自带无线网卡的电脑都有两个无线管理工具,一个是Windows XP操作系统本身的无线管理工具,一个是笔记本厂商提供的管理工具,后者亦是在电脑出厂时已安装好了.那么默认时是哪个管理工具在起作用

  • 8大独门绝技 告别平庸人像 8大独门绝技 告别平庸人像

    人像摄影的概念并不只是仅限于拍摄人物,而是最大限度的去表现摄影师的意境,凸显人物的特色.怎么能避免平庸和老套的糖水片模式呢?下面的8种方法或许会给大家意想不到的收获. 绝技1:带有前景. 作者:SIMON7(林燮) 带有前景拍摄人物,会形成有一定深度的空间,前景更容易让视线集中在主体上.什么样的前景可以用,框架,甚至手放在脸上,等等. 绝技2:使用广角. 作者:狐狸视觉 虽然某些广角焦段会造成一定的失真(所以保证你的模特有个好心情),但是这种拍摄人像的效果有足够的视觉影响力,在纪实,新闻拍摄中,

  • 元宵节微信朋友圈祝福语2015

    2015元宵节祝福语(一) 1.元宵节,吃汤圆,吃着汤圆想着你:对你思念似汤圆,鼓鼓滴;对你的爱恋似汤圆,甜甜滴;对你的关怀似汤圆,圆圆滴.祝你元宵吃汤圆,吃出快乐好运! 2.正月十五喜庆多,合家团圆幸福多,心情愉快朋友多,身体健康快乐多,财源滚滚钞票多,年年吉祥如意多,祝愿好事多多多. 3.十五的月儿圆又圆,给你全家拜晚年!家好运好人也好,幸福美满更团圆! 4.千家春不夜;万里月连宵.举国元宵夜;一路平安歌.放手擎明月;开心乐元宵.阖家齐欢乐;同吃上元丸.宵圆人更圆,幸福又一年. 5.浓浓的情

  • 保卫萝卜攻略分享之16 17关金萝卜打法 保卫萝卜攻略分享之16 17关金萝卜打法

    <保卫萝卜>作为一款颇受欢迎的益智塔防类游戏,已逐渐成为人们休闲娱乐时必不可少的调味剂,其中挑战主题相比于丛林.沙漠.深海等主题,具有更高的可玩性和挑战性,如果穿过了丛林,游过了深海,仍然不能让你觉得过瘾,那就来和小编一起看看这更具挑战的新玩法.本期小编将给大家带来<保卫萝卜>挑战主题中第16关和第17关的攻略技巧,攻略目标依旧是终极追求:道具全清和金萝卜奖杯. 挑战主题第16关:怪物25波 挑战主题第16关中可供选择的炮塔只有便便和魔法球两种,关卡初始有750个金币可以使用.在本

  • 关于Excel【打印标题】地设定

    需求:在Excel打印时,第一页需要打印所有的内容,而在后续页中,需要设置打印标题,这个打印标题不是连续的行,而是两个不同的连续行区域如:第1.2.3行,第10.11.12行组成的打印标题. 也就是说,第一页要显示1--12行所有的数据,而后面的页中,打印标题是1.2.3.10.11.12共6行外加其他内容.不知道有什么实现的方法没? 目前能想到的方法如下: 1:打印标题的内容放在Sheet2中,选择打印标题时,选择Sheet2中的连续行.不知道有没有引用不同Sheet中的内容做为打印标题的功能

  • MIUI7怎么一键去广告? MIUI7怎么一键去广告?

    1.日历:拉到最底下有个添加卡片,点进去全部取消 2.天气:右上角有个信息流设置可以关 3.清理垃圾:可设置为仅在WiFi下加载资讯 其内置一键去广告法如下: 将系统语言改为英文或者繁体中文,一键去除广告

  • 今日头条APP怎么取消订阅不喜欢的媒体 今日头条APP怎么取消订阅不喜欢的媒体

    在今日头条App中有许多新闻自媒体,只要你订阅后,就会有大量这些媒体的新闻显示处理.如果你想要取消订阅也很简单,只需进入个人中心进行操作即可,具体操作请看本文介绍. 今日头条取消订阅方法 1.在今日头条点击左上角自己的头像. 2.接着再选择自己的头像. 3.进入到自己在今日头条的主页界面,在这里选择订阅数量. 4.接着选择自己需要取消订阅的帐号. 5.进入到这个帐号的主页,点击取消订阅. 6.取消成功的啦,以后就看不到的了.

热门推荐
  • V2EX Lite for Windows Phone V2EX Lite for Windows Phone https://www.windowsphone.com/zh-cn/store/app/v2ex-lite/79deb154-b5ed-4003-9608-7c30b3d65319 为Windows Phone写的V2EX客户端.还只是个demo version,功能很简陋,我会不断完善. V2EX的网页版已经很好用,这个客户端对我的意义更多的是学习和练手. --cut-- Sunnyyoung在2014-12-25 22:45:0回答到: 前排支持 min在2014-12-25 22:49:
  • 五个健身饮食让健身效果翻倍 五个健身饮食让健身效果翻倍 现在很多的人健身就是光做健身运动,不懂得怎么用饮食搭配健身取得更好的效果,所以这些人健身的效果也不太明显.健身的时候我们应该怎么搭配饮食才能取得好的效果呢?下面本站阅读小编给大家介绍健身的五个饮食小知识,让健身效果翻倍,一起来看看吧! 健康饮食知识1:训练中,要及时补充铬. 铬是一种维持生命所必需的矿物质,它可以降低人体内的胆固醇,增加耐力,还可以使肌肉增长.氧化 脂肪. 优质的葡萄和葡萄干有天然"铬库"的美誉.普通男人每天吃一串葡萄就可以提供足够的铬,参加健身运动的男人需要加倍. 健
  • 美国中情局公布10份涉UFO文件 教&quot;如何调查飞碟&quot; 美国中情局公布10份涉UFO文件 教&quot;如何调查飞碟&quot; UFO,英文全称为Unidentified Flying Object,中文可译为不明飞行物.20世纪以来,不少目击者观测到的UFO都是碟状的,因此,也有人用"飞碟"代指UFO. 在上世纪90年代,有一部知名的美国电视连续剧,名为<X档案>.其中,探员史考利和穆德一同办理涉及超自然事件的X档案,穆德倾向于相信外星人的存在,而史考利在更加希望利用主流的科学观点来解释一些现象.这部持续数季的电视剧在当时引发了有关外星人的探秘热潮. 其实,关于外星人的目击在20世纪并不少,只不过
  • I9118如何设置来电时铃声加振动 I9118如何设置来电时铃声加振动 很久没有写关于三星手机的教程了,今天我来介绍一篇设置来电时铃声加振动的技巧,这里以三星I9118手机为例子,希望此例子对各位朋友会有所帮助: 1. 在待机屏幕上,点击[应用程序]. 2. 滑动屏幕点击[设定]. 3. 点击[我的设备]. 4. 选择[声音]. 5. 将[铃响时振动]打钩即可.
  • 猫盟直播怎么添加收货地址 猫盟直播怎么添加收货地址 猫盟直播怎么添加收货地址?在猫盟直播里面分数或者是猫粮到了一定的数量是可以兑换礼物的,想要兑换礼物还要收货地址哦,那么要怎么添加收货地址呢?现在小编就教大家猫盟直播添加收货地址方法. 1)打开猫盟直播,然后点击右下角的[我的],然后点击[盟店订单];(如下图) 2)点击[收货地址],接着点击下方的编辑框输入收货地址,最后点击[保存]即可.(如下图)
  • David Bowie《Lazarus》歌词 David Bowie《Lazarus》歌词 Lazarus - David Bowie Look up here I'm in heaven I've got scars that can't be seen I've got drama can't be stolen Everybody knows me now Look up here man I'm in danger I've got nothing left to lose I'm so high it makes my brain whirl Dropped my cell