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

最新文章
  • 哇哈哈哈,老子买了个 128G 的 iPad air 2

    牛逼不牛逼? --cut-- tenfar在2016-05-10 22:46:00回答到: 我的 iPad air 2 128G 金色.在吃灰. wuhanpizi在2016-05-10 22:46:00回答到: niubi prondtoo在2016-05-10 22:46:00回答到: 我很久前 2K 在 ebay 买了 16G 的,去华强北改成 64G 了 Tink在2016-05-10 22:46:00回答到: 贴吧既视感 eddiechen在2016-05-10 22:46:00回答到

  • 总是喜欢翘二郎腿怎么办?

    网上看的翘二郎腿实在是百害而无一利,甚至有人说是慢性自杀. 可是在办公室整天这样坐着,总是不由自主地又翘起来了,而且感觉这样舒服多了. 纠结啊,求解救! --cut-- drej在2011-05-31 17:08:1回答到: 曾经有段时间发神经天天绑沙袋,一个学期下来发现翘二郎腿的毛病就这么改掉了. cynial在2011-05-31 22:06:3回答到: @drej 这个方法不错!

  • 红牛V5怎么截屏 红牛V5怎么截屏

    一. 屏幕截屏:打开手机开启"屏幕截屏"在手机屏幕的顶端向下拉出如下图面,点击"屏幕截图"开关,开启后图标为亮青色的. 还有一种开启的方式就是在设置里设置,如下图: 看到上图,你发现没有"同时按下电源各音量键即可截取当前屏幕",马上照做,只听"噔"的一声响起,在屏幕上方出现一个小带Q字的图标,下拉后可以看到是logkit程序提示截屏存储的途径(/手机存储/logs/screenshot.png). 注意:按照其提示的路径进去更

  • 首页那个提问的链接可以突出些

    初次进来不知道提问在哪儿找了 所以针对这点,建议,提问那二字,可以区别下,在颜色或者其他方面上啊 --cut-- phoenixtree在2010-11-11 09:47:2回答到: 话说,我现在在看哪个网站都想看看它的友好性 manfay在2010-11-11 09:50:2回答到: search! 这里最友好的特性之一就是可以方便地search

  • 手机QQ浏览器3.0上线 首创“云翻译”功能 手机QQ浏览器3.0上线 首创“云翻译”功能

    龙年春节一过,手机浏览器行业已经暗流涌动,语音浏览器大比拼.HTML5比拼.内核之争--这一年注定不会是平静的一年.2011年手机浏览器行业竞争十分激烈,部分新品牌快速完善手机浏览器基本性能,而主流品牌则集中精力比拼创新能力,也产生了许多创新功能,比如,小说阅读模式.应用中心.语音搜索等. 月PV超过1200亿次的手机QQ浏览器在2012年春节前发布了手机QQ浏览器3.0 for iPhone,而且"手机QQ浏览器3.0有爱上线"的视频在腾讯微博上被转评1万多次.通过视频展示了云翻译.

  • 盘点:世界上五种最诡异幽灵物种 盘点:世界上五种最诡异幽灵物种

    据美国国家地理网站报道,科学家在世界各地又发现五大怪异动物,包括恶魔蝙蝠.独眼鲨鱼.僵尸真菌.吸血飞行蛙.迷惑摇滚变色龙在内的"怪物"纷纷榜上有名. 1 独眼鲨鱼 在墨西哥发现的一个罕见的鲨鱼胎儿,身长22英寸(约合56厘米),只有一只眼睛,长在头部前部.独眼鲨鱼是美国"国家地理新闻"网站编辑评出的2011年十大诡异动物之一.实际上,这条鲨鱼患有一种名为"独眼畸形"的先天性疾病.包括人类在内的一些动物都会出现独眼畸形.在母体外捕获独眼鲨鱼还是第一

  • 黄小琥《这无可救药的爱情》歌词 黄小琥《这无可救药的爱情》歌词

    这无可救药的爱情 - 黄小琥 词:崔惟楷 曲:萧恒嘉 没想过自己好傻 像鬼遮了眼睛 你的爱是个陷阱 我却一步步前进 从前的百般殷勤 现在变陌生背影 陷入谷底的心情 眼泪它流个不停 而我 想知道 怎么能 别再想念 如果用 欺骗 圆谎言 那心碎 还要多少遍 这无可救药的爱情 何时才会清醒 怪自己不小心 放太多感情 这无可救药的爱情 直到你毁灭了相信 怎么了会无可救药的伤心 没想过自己好傻 想跟你分输赢 朋友的话都不听 那么多轨迹可循 付出了所有真心 却被你狠狠吃定 明明早把你看清 却还是无法冷静 而

  • 驱动人生5:驱动hold住是王道 驱动人生5:驱动hold住是王道

    想换系统?先别忙!经常有用户发现给电脑换了个系统,电脑既没声音显示也不正常了.其实这些问题大多是因为在新的系统环境下没有合适的驱动支持硬件造成的.想换新系统用户心里多多少少会对自己电脑的"内脏"是否能在各个系统下完美运行有些疑问,使用驱动人生5的用户就能轻轻松松做到心里有数. 如果你是熟悉驱动人生5 的用户一定知道,驱动人生5除了能够为电脑安装适配的驱动之外,还有一些驱动相关的贴心小功能.其中有一项就是专门评测电脑内硬件在其他系统运行环境下是否有合适驱动支持的功能--驱动评估.想换个系

  • 为什么惩罚我掉眼泪_经典QQ空间代码留言 为什么惩罚我掉眼泪_经典QQ空间代码留言

    代码如下: [ftc=#FFF100] ∧. 我愛你 .有啥不对 √ ≠ : 为什么 惩罚我掉眼泪.々 Fly,,[/ft] 效果如下:

  • 在OpenCV环境下写的灰度图像二维傅里叶换,幅值计算,波谱平移和将数值归一化到0到255区间的四个函数 在OpenCV环境下写的灰度图像二维傅里叶换,幅值计算,波谱平移和将数值归一化到0到255区间的四个函数

    在OpenCV环境下写的灰度图像二维傅里叶换,幅值计算,频谱平移和将数值归一化到0到255区间的四个函数 欢迎大家加入图像识别技术交流群:271891601,另外,特别欢迎成都从事图像识别工作的朋友交流,我的QQ号2487872782 ----------------------------------------------- 灰度图像的二维傅里叶变换(cv_gray_fft2),二维傅里叶变换结果的幅值计算(cv_abs),频谱平移(cv_gray_fft2shift),将数值归一化到0到2

热门推荐
  • 所有脚本都应该指定@grant 元数据 所有脚本都应该指定@grant 元数据 两台电脑用dropbox同步firefox配置文件,同步台式机然后在笔记本打开出现这样的情况 [email protected] 元数据 --cut-- brucmao在2013-05-20 20:45:3回答到: 话说现在发图片链接怎么不显示图片呢 iptux在2013-05-20 20:46:1回答到: 我记得firefox是自带同步的 brucmao在2013-05-20 20:54:3回答到: @iptux 自带同步不能同步扩展的配置 switch在2013-05-20 21:21:3回答到
  • 何为幸福的哲理 何为幸福的哲理 何为幸福的哲理 所谓的幸福,就像一杯水一样平淡,不易觉察.只有在你失去她的时候,你才会知道她的珍贵. 很早以前,有一位国王觉得自己不幸福,就派宰相?找一个最幸福的人,将他幸福的秘密带回来. 宰相碰到男人问:"你幸福吗?" 男人回答:"不幸福,我还没有功成名就呢." 宰相碰到女人问:"你幸福吗?" 女人回答说:"不幸福,我没有闭月羞花的美貌." 本站阅读配图 宰相碰到穷人问:"你幸福吗?" 穷人回答说;&qu
  • 美图秀秀主页界面按钮设计(二) 美图秀秀主页界面按钮设计(二) 美图秀秀首页界面按钮设计(二) 本文实现美图秀秀首页中的按钮,它包含3张图片和一个文本.通过开发按钮,我们可以学到iOS的自定义控件,绘制图片和文本的知识.[声明:本博客只能用作学习用途,不得用于商业用途,图片资源均来自官方,产生纠纷,本人不负责]效果如下图 关于绘制控件显示内容,我们需要使用CoreGraphics框架,下面简单介绍一下CoreGraphics. CoreGraphics Core Graphics是苹果提供的一套基于C的API,用于绘图操作.Core Graphics 使用图