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

最新文章
  • 有什么移动端 邮件 APP,当 放在电脑旁的 时候,就自动不提醒?

    经常来邮件时手机响一下, mac 上也弹出提醒,因为客户端延时的问题,会让人误以为是多封邮件,有什么移动端 邮件 APP ,当手机 放在电脑旁的 时候,就自动不提醒吗? 可以通过蓝牙来判断距离,按理说实现起来不难吧? --cut-- supertiny在2016-05-09 19:44:21回答到: 你需要的是 imap 协议 jiezg在2016-05-09 19:44:21回答到: Android 的话用 tasker 吧

  • 程序员 不想做了

    过了30 写代码没有那么快了,也没有那些刚别业的能加班了,该怎么办,说说你的转行路,给俺点启示. --cut-- dog999在2015-04-04 10:29:4回答到: 说说呗 megoo在2015-04-04 10:31:0回答到: 楼主做什么技术的?可否给更多细节? maddot在2015-04-04 10:37:4回答到: 卖水果 开奶茶店 开咖啡店 这是码农界目今眼下为止关于转行研究的成果. jun4rui在2015-04-04 10:56:4回答到: 找个不加班的就好了 myywi

  • 苹果iCloud泄露好莱坞女星艳照引发安全质疑

    9月1日,詹妮弗·劳伦斯等好莱坞明星裸照泄露于网上,经证实是黑客攻击了多个iCloud账号所致,再加上上半年曝光的ios后门事件,让苹果安全性再次受到质疑. 但采访中,许多安全厂商均认为,ios的安全系数比安卓相对较高,而这次出现的云安全问题,其实是无法理解的. "从这次事件来看,问题没出在数据中心,而是用户端."金山网络私有云产品高级总监林凯告诉记者,"在云安全上,人为因素比技术因素隐患更大.即使无法暴力破解,黑客也能通过人际关系.社会工程学之类去获取密码,尤其对于明星,隐

  • 微笑的4个好处 微笑的4个好处

    微笑的4个好处 1.微笑不仅仅使人心情舒畅.精神振奋,而且能够消除忧虑.稳定情绪,可以使动脉弛缓,加快血液循环,起到与胸部.肠胃.肩膀周围的上体肌肉运动一样的效果.研究证明,笑有强心健脑.促进呼吸.有助美容.改善消化.缓解疼痛.降压健身和防治疾病等多种保健功能. 本站阅读配图 2.微笑,不单是种表情,更是一种感情,是拉近人们之间距离的法宝,是融洽人际关系的催化剂.微笑是无声的问候,它是心灵相通的阳光,传递着亲切与尊重的讯息,为深入沟通与交往创造温馨和谐的氛围. 3.微笑,传递给人的是愉快和友善的

  • 描写山水风光的优美段落

    朦胧的远山,笼罩着一层轻纱,影影绰绰,在飘渺的云烟中忽远忽近,若即若离.就像是几笔淡墨,抹在蓝色的天边. .山虽无言,然非无声.那飞流直下的瀑布,是它地裂般的怒吼;那潺潺而流的小溪,是它优美的琴声倾诉;那汩汩而涌的泉水,是它靓丽的歌喉展示;那怒吼的松涛,是山对肆虐狂风之抗议;那清脆的滴嗒,是山对流逝岁月之记录 江水穿山破壁,气势汹汹奔腾而下;奔腾叫嚣的江水,如瀑悬空,砰然万里. 浩渺的江面,烟波荡漾着山形塔影. 优美逶迤的山岭,蜿蜒盘旋,犹如一条正在酣睡的巨龙.俯瞰足下,白云弥漫,环观群峰,云雾

  • 回到小时候 陌陌表情商城上线熊子兔塔宝宝篇 回到小时候 陌陌表情商城上线熊子兔塔宝宝篇

    自从穿越剧流行之后,很多人都或多或少的想象着如果有一天自己可以穿越,回到小时候是什么样子.近日,陌陌表情上线了熊子兔塔宝宝篇表情,看看这两个活宝回到小时候变身宝宝会是什么样子. 兔塔转着圈一脸顽皮的说着宝宝来了;熊子一边奔跑一边撕掉上衣,嘴里还不忘说着本宝宝不服;兔塔自己掐着自己脸蛋,陶醉的说着本宝宝好萌;熊子龟缩在盒子下面,一身冷汗,不停的说着吓死宝宝了;熊子和兔塔同时穿上绿色的睡衣,互相依靠而睡,也不知是谁先说了本宝宝先睡了等等,这对活宝不变的是搞笑呆萌. 一直以来,陌陌就以其独特的市场定位

  • Safari轻松访问桌面版网站 Safari轻松访问桌面版网站

    随着智能手机的快速普及,针对智能手机的"移动版"网站也越来越多,然而有时移动版网站的显示效果还不尽人意.现在苹果在iOS8中推出了可以专门要求访问桌面站点的选项.若用户用Safari访问网站的页面是移动版,需要切换成桌面版,具体操作如下. 第一步,在Safari浏览器页面,点击地址栏. 第二步,当Safari显示主页页面时,再将手指向下拉动屏幕,可以显示请求桌面站点的按钮. 第三步,点击"请求桌面站点"的按钮,即可访问该站点的桌面版.

  • !请教各位大侠在输入框输入数据后,自动刷新页面怎么实现

    求救!请问各位大侠在输入框输入数据后,自动刷新页面如何实现 求救!请问各位大侠在输入框输入数据后,自动刷新页面 如:在输入框1中输入数据后,输入框2,3..出现与输入数据相关的信息 ------解决方案-------------------- <script> function show(num) { Num2.value=num*2; Num3.value=num*3; } </script> <input type= "text " name= &qu

  • Oracle 正则表达式引见 Oracle 正则表达式引见

    Oracle 正则表达式介绍 最近有点懒洋洋的感觉,好内疚啊. 博客也一两个星期没更新了, 从技术群上下载了一个正则表达式的介绍,这两天消化消化,再测试一下,然后更新到博客来吧... 1 楼 sea0108 2011-12-29 正则很实用的! 2 楼 sea0108 2012-03-12 赶紧更新啊

  • 更新Android SDK, 升级ADT遇到的有关问题总结

    更新Android SDK, 升级ADT遇到的问题总结 本文能解决的问题: 1.android sdk, ADT (Android SDK tools) 升级至16, SDK升级4.0 2.Failed to fetch URL http://dl-ssl.google.com/android/repository/addons_list-1.xml, reason: Connection to http://10.159.192.62:8080 refused 3.Failed to rena

热门推荐
  • 2016年莆田湄洲岛三八妇女节有什么活动 2016年莆田湄洲岛三八妇女节有什么活动 2016年莆田湄洲岛三八妇女节有什么活动 湄洲岛属于福建莆田,在台湾海峡西岸中部,交通部确定的全国四大国际中转港之一的湄洲湾港的北部.南北长约9.6公里,东西宽约1.3公里,全岛南北纵向狭长,形如娥眉,故称湄洲.全岛陆域面积14.35平方公里,人口3.8万,海岸线绵延30.4公里. 交通 湄洲岛紧靠福建省的"黄金海岸"湄洲湾,地理位置优越,海陆交通便捷,离大陆仅1.8海里,东距台湾台中港72海里,南达厦门港100海里,北抵福州马尾港70海里,自古以来就是闽台民间交往的桥头堡.拥有轮渡码
  • 英国研究发现恐龙时代鸟类因洪水而灭绝 英国研究发现恐龙时代鸟类因洪水而灭绝 据媒体报道,英国科学家最首次发现了恐龙时代的一种鸟类的筑巢化石,研究表明,该鸟类遭受洪水袭击而灭绝,这使科学家对恐龙时代的生物有了新的认识. 在罗马尼亚Sebes河道附近地区发现的鸟巢化石 英国南安普敦大学的科学家在罗马尼亚Sebes河道附近地区发现了一种史前鸟类群体的化石遗体,其中包括成鸟和雏鸟的骨头,爪子和锯状喙,以及一些破碎和完整的鸟蛋.对新发现的化石的研究表明,是一次古老的山洪爆发,冲毁了整个鸟群栖息地.这种鸟儿属于反鸟亚纲(enantiornithines)的一种,是史前最丰富多样的的
  • 情侣海边浪漫求婚成落汤鸡 戒指显遭巨浪夺走 情侣海边浪漫求婚成落汤鸡 戒指显遭巨浪夺走 对于年轻人来说,能在浪漫的黄昏,宁静的海边许下相伴一生,永结同心的誓言,是一辈子最难忘记的最刻骨铭心的时刻吧!据外媒报道,美国的一对情侣在加州海边举行了求婚仪式,本来浪漫的求婚仪式,却被意外而来的汹涌的海浪"搅局",两人双双跌进海中,求婚戒指差点不保,让人在感叹羡慕的同时哭笑不得. 男子在海边向女友浪漫求婚 马修﹒哈特曼(Matthew Hartman)提前筹划求婚全程,准备充足,在黄昏海滩上掏出戒指,单膝跪下,向他深爱的女友求婚.没想到就在此时,"调皮"的大海&q
  • 新学期黑板报内容资料大全 新学期黑板报内容资料大全 新学期黑板报内容: 新学期畅想 畅想,故明思意就是撇开思路毫无拘束的想象. 眨眼间,寒假是十分快的,一眨眼些学期就会来临. 进入中学后,学习情况有了很大的变化,科目多,内容深,老师的要求也提高起来了.在这种情况下,要真正掌握学习的主动权,搞好自己的学习,订一份学习计划指导自己的学习是很重要的. 因此,我为自己指定了努力的目标. 1.要改变学习上中流的情况.上课记笔记,作业认真做,定期预复习整理学过的知识. 2.语文要提高自己的分析能力和写作的能力,坚持每周写周记;外语本,学期的重点是增加词汇量与
  • 如何通过装修给中小户型扩大空间 如何通过装修给中小户型扩大空间 小户型是很多在都市里奋斗白领的选择,总算有个家了,做为精英,对家的装修装饰自己会有很多的想法,那么有个不可避免的基本问题,要怎么将中小户型的有限空间,展现得更好,令其不让人空间小而感觉到压抑呢?所以在此,提示大家,其实中小户型是可以通过装修装饰来有效扩大空间的. 1.巧用墙面漆:相信很多人都认为中小户型面积小,实际使用功能必然受到影响,其实不然,我们可通过技巧处理来改善居室空间感,从视觉角度如何提升室内空间感呢?室内装修所用的墙面漆是较为重要的一步,墙面漆的颜色选择.色彩搭配和使用可是大有学问,