位置:首页 » 教程 » 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. 你有礼貌,爱劳动,发言积极.瞧,老师一连串数出你这么多优点,看来这学期你进步不小,老师看在眼里,喜在心里.可是你有时仍贪玩,爱调皮同学,作业马虎,纪律松懈,也让老师失望.你是聪明的,要是把更多的心思用在学习上,你会更棒.努力吧,老师期待着

  • Photoshop打造流行的秋季红蓝色外景美女图片教程 Photoshop打造流行的秋季红蓝色外景美女图片教程

    来源:PS联盟 作者:Sener 秋季色比较好把握,可以把主色分为三个层次:高光.中间调,暗部:高光颜色转为橙黄色或淡黄色,中间调颜色转为橙红色,暗部颜色转为蓝色即可. 原图 最终效果 1.打开素材图片,创建可选颜色调整图层,对黄.绿,青进行调整,参数设置如图1 - 3,效果如图4.这一步给图片增加黄褐色. <图1> <图2> <图3> <图4> 2.按Ctrl + J 把当前可选颜色调整图层复制一层,效果如下图. <图5> 3.创建色相/饱和度

  • 热爱生命的名言警句

    1:谁能以深刻的内容充实每个瞬间,谁就是在无限地延长自己的生命.--库尔茨 2:一个人要发现卓有成效的真理,需要千百万个人在失败的探索和悲惨的错误中毁掉自己的生命.--门捷列夫 3:我能舍弃一切,但是不能舍弃党,舍弃阶级,舍弃革命事业.我有一天生命,我就应该为它们工作一天!--方志敏 4:尊重生命.尊重他人也尊重自己的生命,是生命进程中的伴随物,也是心理健康的一个条件. --弗洛姆 5:为了保存一个人的生命,而背叛了千万人的解放事业,遭到千万人唾弃,那活着还有什麽意思?--王若飞 6:祖国更重于

  • Linux中Kill掉进程的10种方法

    常规篇: 首先,用ps查看进程,方法如下: 代码如下: $ ps -ef -- smx 1822 1 0 11:38 ? 00:00:49 gnome-terminal smx 1823 1822 0 11:38 ? 00:00:00 gnome-pty-helper smx 1824 1822 0 11:38 pts/0 00:00:02 bash smx 1827 1 4 11:38 ? 00:26:28 /usr/lib/firefox-3.6.18/firefox-bin smx 185

  • 南非发现新人类家族成员 特征惊人! 南非发现新人类家族成员 特征惊人!

    据国外媒体报道,科学家们在南非的一个漆黑洞穴中发现了新的人类家族成员.这种生物表现出人类的一些特征,但更多的是原始特征,有专家称这些惊人的特征非常匪夷所思.而且这一发现也带来了一些重要的谜题:这些骨头具有多长的历史?它们如何通过如此狭窄的通道进入其中的? 这处遗址位于约翰尼斯堡西北约30英里的地方,这里自2013年被发现以来已经出土了大约1550份骨骼样本.这些化石至少来自于15个个体.研究人员把这些生物称为Homo naledi.它们很显然是属于直立行走的生物,而且拥有复杂的特征.比如说它们的

  • 烧四宝

    主料:香菇(鲜)50克,冬笋100克,草菇50克,蘑菇(鲜蘑)50克 辅料:淀粉(蚕豆)3克 调料:盐4克,白砂糖5克,料酒10克,酱油5克,花生油30克,香油2克,味精2克,小葱5克,胡椒粉3克,姜5克烧四宝的特色:本菜选料精良,咸甜微辣,酒饭皆宜.教您烧四宝怎么做,如何做烧四宝才好吃1. 香菇.冬笋洗净切片: 2. 草菇.鲜蘑顶部切十字花刀: 3. 香菇.冬笋.草菇.鲜蘑下入沸水锅中焯烫后捞出,沥去水分: 4. 铁锅洗净置火上,放入花生油烧热,下入葱末.姜末,煸炒出香味后,下入香菇.冬笋.草

  • 爱你,只为你遥遥守候 爱你,只为你遥遥守候

    我承诺过的要好好爱你,让自己清纯的情感一点一滴地渗透你,用一颗赤诚的心去换取爱的真挚;即便相距遥远,我会用我一生一世的思念遥遥守候,真诚祝福. 思念你的时候,会把爱你的梦流放到缠绵的三月,让撩人情怀的梅雨滋润我想你的思绪,当满山娇嫩的翠绿点缀着五颜六色的鲜艳,我会激动地牵扯你温暖的小手,淋漓着绵绵细雨,去检拾春天的浪漫,爱的色彩. 爱慕你的时候,就把日日孤苦的相思藏匿于深秋的枫林,轻柔的如晨雾般缠绕,飘逸;等待枫叶红遍时,我会轻轻的温情地依偎着你,踏着梦去攀摘那空中漂移的激情--爱的使者. 想念

  • 星域CDN荣膺金i奖 技术创新获行业权威肯定 星域CDN荣膺金i奖 技术创新获行业权威肯定

    2015年12月19日,由中国科学院<互联网周刊>.新华网和中国社科院信息化研究中心联合主办的2015年(第十三届)中国互联网经济年会暨2015"金i奖"颁奖盛典在北京举办,迅雷旗下网心科技打造的创新型CDN品牌--星域CDN荣获金i奖,夺得"2015年度最佳技术创新奖". 在过去近20年时间中,CDN市场长期缺乏技术突破,专业服务商的行业竞争力不断下滑,面对大型互联网企业自建CDN的成本冲击,以及手机游戏.视频直播等新兴互联网业务的全新需求,传统CDN

  • “你买车,我买单” 彩虹汽车APP上线启动仪式隆重举行 “你买车,我买单” 彩虹汽车APP上线启动仪式隆重举行

    随着"电商热"的不断升温,汽车行业传统的4S店已经不能满足用户对线上服务模式的强烈需求,由此全国首个免费汽车电商平台--彩虹汽车APP应运而生,并以创新型的服务产品,开启全方位的汽车生活服务. 全国首个免费汽车电商平台"彩虹汽车"APP上线 12月8日,由彩虹伯乐(北京)电子商务有限公司(以下简称"彩虹汽车")主办的"你买车,我买单"彩虹汽车APP上线启动仪式在北京举行,并宣告全国首个免费O2O汽车电子商务平台"彩虹

  • 如何正确设置虚拟内存

    当我们在玩游戏或进行一些其他的操作时候,有时候会系统会提示虚拟内存空间不足,那么为什么会出现虚拟内存不足的错误呢,现在我们就一起来看看如果解决虚拟内存不足报错 内容: 当我们在玩游戏或进行一些其他的操作时候,有时候会系统会提示虚拟内存空间不足,那么为什么会出现虚拟内存不足的错误呢,现在我们就一起来看看如果解决虚拟内存不足报错. 在默认状态下,是让系统管理虚拟内存的,但是系统默认设置的管理方式通常比较保守,在自动调节时会造成页面文件不连续,而降低读写效率,工作效率就显得不高,于是经常会出现"内存不

热门推荐
  • Photoshop用荷花素材设计中国风水墨封面 Photoshop用荷花素材设计中国风水墨封面 教程主要教思缘的朋友使用Photoshop使用荷花素材设计中国风水墨封面,主要用废弃的荷花素材以及鱼素材合成,制作一幅仿画意图片,很喜欢这这种中国风的图片很漂亮的说,喜欢的朋友一起来学习吧 效果图
  • 给管理者和普通员工的21条建议 给管理者和普通员工的21条建议 给管理者和普通员工的21条建议,句句戳中! 本站阅读配图 1.要按时完成任务.如果你无法按时完成,一定要第一时间告诉你的上司/老板. 2.如果完不成任务是因为缺资源(缺人,缺钱或其他),一定要在第一时间找上司/老板要资源. 3.要尽量满足你的岗位职责要求.如果你的岗位职责设置有问题,一定要和上司/老板谈,而不是忍耐. 4.上司/老板经常要求你做很多事情.不能全部做到不要紧,尽量多做一些就会有奇迹.同时要告诉上司/老板你不能做到什么. 5.不要同时想抓两只兔子.如果上司/老板要求你同时抓两只兔子,
  • Photoshop给黑白图片加上完美的透射光束教程 Photoshop给黑白图片加上完美的透射光束教程 来源:飞鱼的声纳 作者:不详 制作透射光束的方法有很多,用滤镜是比较常见的.这里介绍一种纯手工制作方法.大致过程:先设定好光源位置,用曲线等调亮.然后选取高光区域,拉成光束效果,用蒙版控制好区域.后期再给光束底部增亮即可. 原图 最终效果 1.通过将图片拖拽至图层面板底部的新建图层图标上来将背景图层复制一层.将其命名为"基础光线". 在图层面板中选择此图层,按下Ctrl + M键(CMD + M)应用曲线.调整至一个非常强烈的曲线,让云彩的对比度拉到最大,使其中的一小片区域完全变成白色
  • 2499元AMD 760K四核独显台式主机电脑配置 2499元AMD 760K四核独显台式主机电脑配置 如今DIY组装电脑多数也是以Intel平台为主,不过AMD平台也有一些不错的配置产品,只是数量上要比Intel平台少. 处理器方面,AMD 760K四核处理器是新一代AMD速龙ii四核处理器,屏蔽了核心显卡,售价仅445元,性价比非常出色.AMD 760K具备畅快的游戏性能体验以及多任务媒体性能,是一款注重性价比的主流游戏装机性价比利器. 显卡方面,七彩虹网驰GTX650属于时下高性能中端主流显卡,采用28m工艺,拥有1GB GDR5高速显存,性能主流,另外采用了鲨鱼仿生学的设计,外观出色,散热
  • 财付通手机接收的验证码的有效期是多长时间? 财付通手机接收的验证码的有效期是多长时间? 财付通手机接收的验证码一般在第二条验证码发出前的30分钟内有效,即:超过30分钟,或已申请了重发验证码后原验证码即失效,如果不发第二次或没重新申请,原验证码也是在30分钟内有效.
  • 佳能1100D有什么功能 佳能1100D有什么功能 佳能1100D有功能引导,Basic+,高光色调优先,自动亮度调节,长时间曝光噪点抑制,高ISO噪点抑制等功能.