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

最新文章
  • 请问 pb2 的最新版是不是 2.5.0-dev-7

    如题,非常感谢! --cut--

  • CF英雄级武器巴雷特毁灭价格及属性一览 CF英雄级武器巴雷特毁灭价格及属性一览

    6月20日信息,从穿越火线第一把英雄级武器火麒麟问世以来,玩家们对英雄级武器的关注度就非常高,按照官方出英雄武器的套路,所有玩家热衷的枪基本都出了个遍,连近战武器都出了,唯独人气非常高的巴雷特没有出英雄武器,当所有人都翘首以盼的时候,疑似英雄级巴雷特的截图已经爆出,英雄级巴雷特的售价及武器属性也随机公布,下面就让我们先睹为快! 名称:Barrett-毁灭 售价:888000CF点(永久) 武器属性:.....[查看详情]

  • NBA球星科比代言 联想K900将于5月6日首发上市 NBA球星科比代言 联想K900将于5月6日首发上市

    在年初CES 2013大会上亮相的联想新一代旗舰手机K900受到了很多用户的关注,不少网友都在询问联想K900什么时候上市.今天,联想官方给出了答案,联想K900将于5月6号正式发布,同时还将会有高配版面世. 依据之前获得的信息,联想K900拥有一块5.5英寸超大触摸屏,分辨率则为时下顶级的1080p(1080×1920像素)级别,并搭载2GHz英特尔双核处理器,内存组合为2GB RAM+16GB ROM,同时还拥有1300万像素主摄像头,整体配置十分出色,至于K900的价格,高配版至少为300

  • 运动会加油稿50字大全 十篇

    1.致运动员 你是跑道上划过的流星, 燃烧自己,洒下光辉, 也许你并没有看到成功像你挥手, 但你已奋斗拼搏过, 相信自己, 力量就在心中. 2.你胜利了 望着远方红色的终点线, 那是汗水铺成的路, 泪水堆成的山, 平时的努力与奋战, 不就为这一瞬间, 于是你们用尽全身力气, 冲向那决定命运的红线, 你胜利了, 耳旁飘来了同学们的欢呼与赞叹. 3.写给100米运动员 一百米是个风狂的世界! 10米是早晨地平线上的微光! 20米是微微的红光! 30米太阳以跳出了地平线! 40米风正狂奔! 50米欢呼

  • 女性乳头发痒怎么回事 女性乳头发痒怎么回事

    核心提示:湿疹是乳头瘙痒的最常见的原因,但也并非所有乳头瘙痒都是过敏引起,也可能是乳腺癌. 很多女性都有过乳头发痒的感觉,她们为此羞愧并难以说出口.美国"网络医学博士网"最新载文,刊出美国专家简·哈里·森霍纳博士的解读.她认为,乳头瘙痒应当心以下两种疾病的可能. 一.湿疹.是乳房瘙痒最常见病因,会发生于各年龄段人群.有过敏病史或家族病史的人群更容易罹患湿疹.湿疹的环境诱因包括:皮肤干燥.泡澡时间过长.护肤品中的染料和香料.清洁剂.羊毛和泡沫等环境过敏源以及压力等.通常通过体检及病史诊断

  • 如何建立建立高效人际关系? 如何建立建立高效人际关系?

    没有关系网,在职场中无法生存." 这就是中国的职场现实,同事之间尤其如此,因为你们之间不存在直接的隶属关系,很多时候,你是不是对同事有影响力,很大程度上是看你有没有关系,而不是看你手中有没有权力. 但是,很多人对如何建立高效的人际关系没有引起足够的重视,以为建立关系就是相互之间"称兄道弟""吃吃喝喝",或者认为依靠自己的能力也能打拼出一片天地,这些都是十分幼稚的想法.要想在职业或事业上有大的发展,必须站在战略的高度上来谋划.构建和运营我们的关系网络,以增加

  • iPhone惊现WiFi漏洞 手机管家四大建议安全护航 iPhone惊现WiFi漏洞 手机管家四大建议安全护航

    最近一家安全公司研究发现,利用苹果iPhone手机在一个WiFi上的漏洞,可以利用攻击脚本程序,对某一部苹果手机或者其中的一个软件,发动拒绝服务攻击,用户手中的手机,将变成"砖头". 对于iPhone的这一漏洞,腾讯手机管家安全专家表示,漏洞只能等苹果iOS升级来修复.由于iOS的自身限制,用户也无法像安卓版手机管家那样获得WiFi连接安全检测服务和一键连WiFi服务.广大iPhone用户最好不要接入无密码保护的免费WiFi. 日前,国外一家移动安全公司公布了上述iOS设备拒绝服务攻击

  • 17APP怎么涨粉 17APP怎么涨粉

    17APP怎么涨粉?17APP是目前最流行的一款交友软件,在17你的生活点滴中进行直播发布照片等互动,吸引用户来观看你的直播是可以赚钱的哦!粉丝越多,赚的钱也就越多,让我们一起来看看如何利用涨粉来为扩充自己的小金库吧! 17APP涨粉技巧攻略 1.发自拍美照,美女帅哥就不用多说了啊 2.直播有趣特色的内容,吸引人吧~ 3.邀请好友或是在贴吧等社交软件求粉丝吧~ 4.和17上其他用户互相关注,互相加粉,互相按赞的呦~ 17你的生活点滴赚钱方法介绍 平均只要有1000人观看,直播者有1元分红,累积1

  • 《魔兽世界》6.2新增变身鸦人玩具与火鹰宝宝宠物 《魔兽世界》6.2新增变身鸦人玩具与火鹰宝宝宠物

    啦啦啦,萌萌哒小编又来啦!今天小编要给大家带来的是,<魔兽世界>6.2新增变身鸦人玩具与火鹰宝宝宠物,各位玩家一起来看看吧! 腐化的原始方尖碑 伊克赞的诅咒之羽 将你变成一个鸦人: 活泼的小鬼 每次小鬼召唤都会随机为你提供:幻化.虚空银行.修理等功能. 另外之前的新营声望购买宠物也放入了收藏中. 凶蛮虎崽:牙刃追猎者崇敬 炽热火鹰:觉醒教派崇拜 更多精彩内容请前往牛游戏WOW专区:http://wow.newyx.net/ 另外,如果大家想要了解WOW的最新动态,可关注我们的微信,我们会每天按

  • 低调是一棵站在山顶的矮树 低调是一棵站在山顶的矮树

    那日,一外地书法家来访,坐而论道,谈起做人的姿态,我与他都颇多感慨:有些人表面气势如虹,实则庸碌平常;有些人看来谦逊若水,内心却气象峥嵘--实在是形形色色,乱花渐欲迷人眼. 临走时,他送我一条幅,上书"低头看云云在脚下".乍看,不合逻辑.细想,做人的道理尽在其中:站到很高的境界,谦逊一低头,不经意间,却能看到最美的风景. 本站阅读配图 书法家的意思很明确,低调,是很美的生活姿态.现在我每天都用这条幅来教育自己,因为我也曾是个白眼望天之人. 在快节奏的现代生活中,低调,是一种自我放松.低

热门推荐
  • 快的打车如何绑定支付宝? 快的打车如何绑定支付宝? 支付宝打车具体操作方式 前提必须下载安装支付宝手机客户端或者快的软件.如果你已经成功安装了,咱们就开始了解一下不可错过的支付宝打车的具体使用方式吧,那可是春节放假期间呼朋好友出玩必备之一哦!因为打车的时候是需要通过支付宝免费付款的哦.从2014年1月22日起,使用快的打车,并绑定支付宝付款即为享受乘客每单奖励10元,司机每单奖励15元的超值优惠.想要享受此优惠,就必须将快的打车绑定支付宝.那么在使用快的打车的时候如何绑定支付宝呢? 以下小编为大家带来详细的快的打车绑定支付宝图文教程. 一.首先打
  • excel2010页边距怎么设置 excel2010页边距怎么设置 Excel 2003和Excel 2007在打印预览时都可以直接单击页面来缩放页面大小,还可以单击"页边距"按钮及选择"显示边距"选项来查看页边距,或通过拖动黑色边距控点或线条来调整边距.那在Excel 2010中还有"手动调整页边距"这项功能吗?答案是有的,下面的步骤将为你介绍怎么使用: 一.非手动设置页边距方法 点击下图红框中的"页面布局"选项. 接着点击下图红色箭头所指的"页面设置"按钮. 然后点击下
  • 页游烈焰月流水8000万 画面风格有传奇身影 页游烈焰月流水8000万 画面风格有传奇身影 关心页游开服情况的朋友可能已经注意到,最近有一款名为<烈焰>的页游开服数相当突出,已经连续4周位居开服榜榜首.<烈焰>是由广州微娱公司发行,9377游戏平台独代,多家页游平台联营的一款ARPG页游.据消息人士透露,<烈焰>月流水收入已经超过8000万.此前,9377平台曾表示,<烈焰>在该平台的月收入达3000万,创造单日200万记录. 随着今年手游市场的持续升温,无论是媒体还是行业关注的焦点都纷纷转向了手机游戏.页游似乎淡出了人们的视野,可这并不代表它不挣
  • 优酷创业分子上线  90后创业者豪言吐槽投资人 优酷创业分子上线 90后创业者豪言吐槽投资人 日前,由优酷王牌财经节目<老友记>原班人马倾力打造的网生创业对谈秀<创业分子>在优酷独家上线.节目将类纪录片的真人秀手法融合在创投大咖的对话过程中,通过思想和语言的几重碰撞,为创业者.大学生和职场人士提供了鲜活的创业案例和在创业路上的深刻感悟. 90后创业先锋张天一 霸蛮吐槽投资人 <创业分子>第一期的两位对谈嘉宾是<创业家>副总裁纪中展和伏牛堂创始人张天一,他们一位是70后创业导师,另一位是90后创业先锋.节目中张天一的一句"需要被说服的投资人都
  • 最全的响应式设计资源库 最全的响应式设计资源库 CSS 响应式框架 这一部分主要介绍了一些最新的CSS响应式框架,更轻量,而且兼容性也不差.(Foundation,Skeleton是较为老式的CSS响应式框架) Girder Girder 使用了Sass silent classes (占位符,输出时不会体现)在HTML中组织内容,标记能够额外处理一些表象类(presentational classes ),比如 "unit_1of4″, "small-2″, "grid4″. Cardinal Cardinal 是一个小
  • 4个关于水电改造的注意事项 4个关于水电改造的注意事项 4个关于水电改造的注意事项如下: 水电改造注意事项之材料的选择 买材料的时候要看是不是正规的厂家生产的合格产品,现在的水电品牌多如牛毛,业主在装修的时候不知道什么牌子,什么规格的比较好,最好是对这方面的知识有些了解,要不然让装修公司去买的话以次充好,那就得不偿失了. 水电改造注意事项之设计把关 在装修的时候业主要对自己家里的布局有个全局的想法,要弄清楚家里的家具大概放什么地方,哪里放什么电器,多大的都要考虑好,这样有规划的做水电改造是很关键的,要不然会浪费很多人力物力,在设计的时候装修公司会为你