位置:首页 » 教程 » JS实现的网页上的颜色拾色器

JS实现的网页上的颜色拾色器

日期:2016-04-01 阅读:0num
Advertisement

使用Js代码编写一个网页上用的颜色拾色器,也就是选择颜色用的,用鼠标单击任意颜色块,将弹出颜色值,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便。

颜色拾色器

红 绿 蓝 灰
用鼠标单击下面的颜色块,将弹出颜色值

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

相关文章
  • JS实现的网页上的颜色拾色器

    使用Js代码编写一个网页上用的颜色拾色器,也就是选择颜色用的,用鼠标单击任意颜色块,将弹出颜色值,当你想使用某种颜色而不知道颜色值的时候,用这个小特效可以告诉你颜色值是多少,比较方便. 颜色拾色器 红 绿 蓝 灰 用鼠标单击下面的颜色块,将弹出颜色值 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js实现在网页上简单显示时间的方法

    这篇文章主要介绍了js实现在网页上简单显示时间的方法,实例分析了javascript实时显示时间的技巧,需要的朋友可以参考下 本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

  • js实现在网页上简单显示时间的方法教程

    本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的,美工好的朋友可在此基础上进一步美化完善 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • 运行此js时提示网页上有异常,请教错在哪里

    运行此js时提示网页上有错误,请问错在哪里? <script language= "javascript " type= "text/javascript "> function page(value){ var $s = location.search; var $t; if ( value > 0) { $s.indexOf( "page= ") > 0 ? $t = $s.replace(/page=([0-9]{0

  • 利用JS代码在网页上绘图,该怎么处理

    利用JS代码在网页上绘图 目前我学习制作一个利用C#浏览器控件,通过代码和网页中的JS代码交互,使得网页上动态绘制图形. 主要只用画出简单的点,线段即可. 我之前了解到,利用html5的canvas可以实现该功能,如moveto lineto, 但是我发现canvas必须使用IE9以上才可以, 我想用使用更低版本的浏览器也可以兼容, 所以想请问有没有其他方法实现我所说的功能. 分享到: ------解决方案-------------------- 如果只需要支持IE浏览器的话,建议采用VML,绝

  • JQuery 拾色器插件发布-jquery.icolor.js JQuery 拾色器插件发布-jquery.icolor.js

    以前我一直用的那个(eyecon.ro) 功能完整也简易,但是不尽符合上面的要求,于是 google了N下,结果没找到现成的jquery拾色器插件很好的支持以下功能: 简单易用,仅显示常用的那些色块给用户选择,另外提供一个输入框方便用户输入自定义的色值 于是我写了icolor这个插件,除了支持上面的要求,还有别的一些特性如下: 1,默认提供的色值为"常用的浏览器安全的色值".相当于整合了下面最后一个prototype版本的颜色拾取器.关于浏览器安全色值,可参考维基文档http://en

  • 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打造拾色器无法实现循环点击onclick

    用纯js制作拾色器无法实现循环点击onclick 网上是有很多拾色器代码,但是我是新手,想用纯js制作拾色器,代码如下. 问题是我如果一个一个触发onclick事件内容输出没有问题,但是假如for语句,就提示undefined <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #container{

  • iOS软件iWheelColor:装在口袋里的拾色器 iOS软件iWheelColor:装在口袋里的拾色器

    颜色代码对于程序员和网页设计师来说非常重要,但如果不是在电脑旁,那么多的颜色代码一定不好记,也不容易查看效果.所以就有贴心的国外开发商推出了一款名为iWheelColor的辅助软件. iWheelColor 点击进入下载界面 iWheelColor iWheelColor是一款拾色器软件,它可以让平面设计师.程序员和网页设计师等工作者非常直观和正确的找到颜色组合.我们在软件的主界面上可 以看到一个色彩轮,可以随意用手去触摸滑动或是改变.iWheelColor既支持2种颜色的互补,也支持三个颜色的

  • JavaScript奇效实例012-网页拾色器

    JavaScript特效实例012-网页拾色器 实例012 网页拾色器 实例说明 在网站中经常需要用户自定义颜色来显示某些信息.这可以在网页添加一个拾色器来实现. 技术要点 在本实例中仅使用216种浏览器安全的颜色,即所谓的Netscape色块.这216种颜色分别代表0.51.102.153.204这5个颜色值以及每一种原色(即红.绿.蓝).这些十进制数值对应的十六进制数分别为0x00.0x33.0x66.0x99.0xCC和0xFF.在HTML的颜色属性中黑色是#000000,纯红色是#FF0

  • Linux下拾色器:功能强大的gpick Linux下拾色器:功能强大的gpick

    以往在 Linux 下要拾个颜色啥的我一直用 gcolor2 应付着.不过话说回来,gcolor2 的功能实在有些弱.现在有了功能更加强大的 gpick,gcolor2 可以正式"下岗"咯. 且让我们来看看 gpick 有些啥好功能: 在放大的屏幕区域中,按空格键即可快速取色: 为拾取的颜色自动命名: 能够将拾取的颜色以不同格式拷贝到剪贴板,目前包括十六进制.RGB 及 HSL: 可以将拾取的颜色导出为调色板,支持 gpl.ase.mtl 等格式,以供 GIMP.Inkscape 等程

  • HTML 拾色器

    获取 暗/明 渐变颜色效果.

  • js随机生成网页背景颜色的方法教程

    本文实例讲述了js随机生成网页背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- color=new Array(

  • js随机生成网页背景颜色的方法

    这篇文章主要介绍了js随机生成网页背景颜色的方法,涉及javascript操作背景色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js随机生成网页背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE> <

  • JS文件中的中文在网页上显示为乱码解决方法 JS文件中的中文在网页上显示为乱码解决方法

    JS编码转换,这句话本身就是一句具有二重义的话.通常理解为JS文件里能转换编码的代码,但是,我所碰到的问题并不是这样的,是要解决JS文件本身的编码问题,它是UTF-8编码的还是ANSI编码的?在百度.谷歌上一搜,大家都是说通过JAVA后台处理来解决编码问题,试问,这样能解决JS文件本身的编码问题吗? 之所以提出JS文件本身编码问题,是因为JS文件的编码不同,造成了中文显示为乱码. 通常,在Eclipse中建立一个JS文件(含有中文),在Eclipse的编辑器中看到的中文都很正常,但是显示在网页上

  • 网页上播放mp3或flash的js代码

    本文章来介绍利用object实现可控制的网页上播放mp3的js代码,有需要的朋友可参考. 先来介绍media player控制,对应控件 <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" 后面我们会有讲到. 例1 代码如下 复制代码 <object id="player1" type="application/x-oleobject" height="3

  • 网页上展示日历(js)

    网页上显示日历(js) <head runat="server"> <title></title> <%-- 用JS/connotation.js方法时要在下面写两段代码,并且在文本框下要有一个层用来放日历--%> <script src="JS/connotation.js" type="text/javascript"></script> <script type=

  • 高分坐待求解答,别人网页上的Js复制一下就会失效,好奇怪

    高分坐等求解答,别人网页上的Js复制一下就会失效,好奇怪. http://www.quakemachinex.com/blog/wp-content/plugins/clean-archives-reloaded/ajax-single.php?postid=215 看此贴,无毒的... 把里面的js代码复制到本地,然后你试试自己写一个类似的host上去,不会转换. 但是作者的那些实例,你复制,却成功了,百思不得其解.... ------解决方案-------------------- 在 te

  • 这个远程XML如何解析到网页上? 用JS 或者ASP都可以

    这个远程XML怎么解析到网页上? 用JS 或者ASP都可以 本帖最后由 phpkakaok 于 2013-07-02 15:28:53 编辑 <?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/200

  • 如其通过java调用JS获取网页上的内容

    如果通过java调用JS获取网页上的内容? HTML源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><tit

最新文章
  • [东莞]寻找网络安全人才

    岗位需求 网络与产品安全性设计工程师 岗位描述 1 .对华为产品和解决方案进行安全评估和渗透测试. 2 .借鉴业界成果,标准和最佳实践,研究安全技术方法. 岗位要求 1 .计算机.通信.电子.自动化.信息安全等相关专业本科及以上学历,三年以上开发工作经验: 2 .精通 TCP/IP 及电信基本通信技术或电信技术: 3 .至少有一项安全相关技术的实践经验(安全编码或安全设计等)和漏洞挖掘经验. 4 .社招 16 级(含)以上. 工作地点 东莞松山湖 联系方式 简历请发到 [email protected]

  • 如何安装Filpboard的英文版?

    Filpboard出中文版以后,我在app store里就只能看到这个中文版了. 怎么换回原来的英文版呢? --cut-- carlhan在2012-01-31 09:48:1回答到: 用美国帐号去美国区搜索并下载 lizdo在2012-01-31 10:08:3回答到: 特地为了Flipboard注册了个美国区帐号 ggshiney在2012-01-31 10:28:3回答到: 越狱后装ipa hileon在2012-02-01 10:04:0回答到: @ggshiney 能给个英文版的ipa

  • 马年十二生肖的贵人运 马年十二生肖的贵人运

    进入2014甲午马年,有的生肖欢喜有的生肖忧愁,有运势好的,也有运势不佳的,有贵人多多锦上添花的,也有雪中送炭化灾解难的,当然,也有孤军奋战无人相助的.那么,十二生肖2014年的贵人运如何呢?流年运好的朋友该怎样利用好时机和人脉,而贵人寡助的生肖又该怎么改善窘境呢?下面我们一起来了解吧! 一.贵人运极旺的生肖 生肖虎 虎人遇马年,与太岁相合,容易在事业与生活中收获贵人的帮助.因此,宜确定今年的奋斗目标,拓宽人际关系网,广结良缘,将今年的贵人好运发挥到最佳效果. 生肖羊 羊人今年得太岁相助,火土相

  • 华为畅享5优化网络信号方法 华为畅享5优化网络信号方法

    对于自身网速不太好的童鞋有福啦,下面小编讲给你们讲怎么优化信号哟,要知道作为信号处理起家的华为其信号是手机系统内部自行调节的,下面就让小编来给你们讲下华为畅享5优化网络信号方法. 1)首先我们先打开[设置],然后来到全部设置找到[更多],打开后点击第二个[LINK+].(如下图) 2)打开后我们便可以根据自己的需求自由选择哪种格式来优化信号了.(由于小编整理的图片经过压缩所以比较模糊请往右们见谅下)(如下图)

  • 迅雷3000万美元领投上海乐相VR 迅雷3000万美元领投上海乐相VR

    今天,大朋VR(上海乐相科技有限公司)在圣诞节宣布获得来自迅雷领投.恺英网络跟投的3000万美元B轮融资.投资完成后,迅雷将成为大朋VR机构投资者中占比最大的股东.乐相还宣布三方达成战略合作,将依托各自优势在VR产品.技术.内容平台及游戏开发等领域深度合作. 上海乐相成立于2014年,推出的产品包括VR手机盒子类的产品Virglass以及PC端VR产品大朋头盔. 据悉此次合作小米亦紧密参与其中.此前,乐视投资了灵镜VR,推出LeVR COOL1,华为.腾讯同样在布局VR.虚拟现实要迎来大公司博弈

  • 东部华侨城&nbsp;度假感动生活&nbsp;抽奖得QQ黄钻QQ蓝钻QQ红钻等 东部华侨城&nbsp;度假感动生活&nbsp;抽奖得QQ黄钻QQ蓝钻QQ红钻等

    东部华侨城 度假感动生活 抽奖得QQ黄钻QQ蓝钻QQ红钻等 这活动也是抽奖的.说是参与就有机会,有机会啊 亲 去试试吧 活动时间 到 6月3日为止 具体的奖励 看活动规则 http://octeast.act.qq.com/rule 活动地址 http://octeast.act.qq.com/

  • 球球大作战呱呱获取攻略 新孢子皮肤呱呱怎么获得? 球球大作战呱呱获取攻略 新孢子皮肤呱呱怎么获得?

    球球大作战5月限时出售的呱呱孢子最新上线啦!简直萌炸本宝宝了!很多玩家们都想要获得这款最新的孢子皮肤呱呱,那么球球大作战呱呱孢子怎么获得?球球大作战呱呱孢子作用有哪些呢?很多小伙伴们都很好奇,小编给大家带来呱呱孢子获得方式的详细介绍,感兴趣的小伙伴们一起来看看吧! 给各位球球大作战的玩家们带来呱呱孢子获得方式的详细介绍. 球球大作战孢子呱呱使用: 当游戏时,达到一定的体重,吐球是就会显示该特效. 球球大作战呱呱孢子获得方式: 这款皮肤为限时出售26天棒棒糖价值180的孢子皮肤,是通过开启奇妙宝箱

  • PHP中常用的几个mysql语句

    PHP中常用的几个 mysql 语句 显示数据库或表: show databases;//然后可以use database_name; show tables; 更改表名: alter table table_name rename new_t; 添加列 : alter table table_name add column c_n column attributes; 删除列: alter table table_name drop column c_n; 创建索引: alter table

  • 如何用Z 1/Z1 Compact体验Z2智能接听功能 如何用Z 1/Z1 Compact体验Z2智能接听功能

    索尼 Xperia Z2 智能手机拥有一个快捷接听电话功能,将手机直接放到耳边即可.这个功能来自 Xperia Z2 的一个叫做 Smart Call Handling的智能接听功能.该功能有三种玩法,把手机放在耳边即接听来电;摇摇手机拒绝来电,第三种是翻转手机把来电调成静音. 现在这一功能不再是 Xperia Z2 独享,Z1 和 Z1 Compact也可以体验这一功能.不必多说,使用这一功能的前提是手机需要 Root,然后安装 recovery,步骤不难,XDA 开发者论坛的大神已经提供大家

  • 深入理解php中$GLOBALS与global区别

    在php中$GLOBALS是超全局变量而global也是一个全局变量,那么它们在应用中有什么区别呢,下面我就整理了一些相关的例子各各位同学一起分享吧. php中有一个不为很多人所用的超全局变量$GLOBALS.合理使用这个变量能使工作变得更加有效率,本篇文章主要分析一下这个超全局变量的用法以及$GLOBALS和global的区别. $GLOBALS定义:引用全局作用域中可用的全部变量(一个包含了全部变量的全局组合数组.变量的名字就是数组的键),与所有其他超全局变量不同,$GLOBALS在PHP代

热门推荐
  • 请教这个正则表达式怎么写? 请教这个正则表达式怎么写? 截图: 需求: 在Eclipse中匹配后面没有 finnaly 的catch块 目前下面这句只能匹配整个catch块,但正向预查无法使用 可以匹配catch块 : catch(.*\R)+?.*?} 求帮忙! --cut-- jiyee在2015-03-17 14:54:1回答到: catch[^{]*\{\s+([^}]+)\}(?!\s+finally) imn1在2015-03-17 15:25:1回答到: catch.*?\{(?:[^{}]+|(?R))*?\} int30xcc在20
  • “八年抗战开始了”升级版 奇葩抗日剧让国人彻底无语 “八年抗战开始了”升级版 奇葩抗日剧让国人彻底无语 相信大家一定不会少看抗日片,有时候看到咱们的英雄把日本人打成狗的时候,真的很振奋. 可是问题来了,本来抗日片拍的好好的,为了显示咱民族气概也是很正常,可是有的导演,还真是让人觉得智商捉急,且看下面的. 嗯,7+1是8年,抗日时间就是这么多,是对的,可是再想想,你是怎么知道抗日打八年的?? 一百50公斤,也就是300斤,嗯大概3个常人的体重... 这个更牛逼,那年头咱都有这技术了? 呵呵,这特么也是让人醉了. 这句话听起来好像就是这样,可是用脑子想想,都叫你5更死了,三更怎么可能活不到? 石头把飞
  • Notify - 基于jquery的消息通知插件 Notify - 基于jquery的消息通知插件 Sticky是一个简单的页面消息提醒jQuery插件.可以设置让消息在页面的四个角落出现,也可以设置在页面中央出现.可以手动关闭消息,也可以设置成自动关闭. http://thrivingkings.com/sticky/ 2)JNotify是一个JQuery插件,基于JQuery UI实现,用于创建页面消息提醒和状态提示条. http://jnotify.codeplex.com/ 演示地址:http://www.fabiofranzini.com/jNotify/Demo.html 3)Hu
  • 每一个男生心中都有一个“沈佳宜” 每一个男生心中都有一个“沈佳宜” 最喜欢的情节是在那个记忆的冬天,两个人面对面一起放孔明灯.男生真切的声音,不要告诉我答案,请让我,继续喜欢你.然后抬头看承载彼此心愿的灯飘远.如果他们能够勇敢一点点,冲动一点点,不顾一切一点点.那么是不是结局就会不同,那么是不是就会更尽人意一些更像电影的完美尾声,是不是,是不是就不会让我们轻易地看清过往.或是,他们已经用尽了全部力气来承接这一份青春里的仓促,把全身心都投入在了"喜欢你"这件事上,才不忍被打破,想要沉溺,想要保持,不要出现让自己可以退缩的理由.因为我也很喜欢,那是喜欢你的
  • 微软广告意外泄露WP8手机系统下轮更新时间 微软广告意外泄露WP8手机系统下轮更新时间 据微软最近发布的招聘广告披露,微软将在今年圣诞节之前发布Windows Phone 8操作系统的下一个升级版本.微软对于Windows Phone产品更新通常是守口如瓶的,但是,微软上个星期发布的一个招聘手机测试的软件开发工程师的广告披露了Windows Phone 8的更新时间. 这个广告称:"现在加入我们是一个极好的时机,因为我们将完成目前的发布版并且准备在今年圣诞假日之前发布下一个升级版本.我们将保持Windows Phone的势头,带来新的杀手设备和让用户满意的体验.在这个职位上和机构中
  • 51社保作为合作伙伴亮相2015阿里云栖大会 51社保作为合作伙伴亮相2015阿里云栖大会 10月14日-15日,备受关注的"阿里云2015云栖大会"在杭州召开.大会吸引了全球约2万名开发者参加,逾3千家云上企业到场.与往届大会不同,本届云栖大会以"互联网.创新.创业"为主题,无论是场面之大还是人数之多,以及技术之新都使这场大会更具看点.在开幕首日,国家相关部委负责人.中科院院士以及23个省区市的政府部门代表到场,共议云计算发展. 作为阿里云的合作伙伴,51社保网也受邀参加了此次大会,并在现场设置的独立展示区. 携手阿里云,引领社保服务走上"云端