位置:首页 » 教程 » 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

最新文章
  • iOS Safari下V2EX无法回复 iOS Safari下V2EX无法回复

    前几天开始touch上一直无法回复. 症状为:点击回复进入一个单独的回复页面(主题和回复列表都不见了),然后输入内容再点回复就一直在那个页面死循环. 今天开了console报了个错.会不会是这个原因? --cut-- mckelvin在2013-02-20 22:46:3回答到: @Livid Livid在2013-02-20 22:47:3回答到: 机器是否越狱了? mckelvin在2013-02-20 22:51:2回答到: test Livid在2013-02-20 22:53:1回答到

  • Photoshop给废墟人像添加粉色朦胧美效果 Photoshop给废墟人像添加粉色朦胧美效果

    宁国路废墟,是上海最近比较火的一个外拍地.不过随着废墟类型片越来越多,我们发现大多数片子走的都是颓废风,后期上也多是以低饱和甚至黑白,做旧等效果为主.令人不禁想问:废墟就一定得拍得这么颓废绝望吗?今天的教程就来教大家自己动手打造简单的道具,再辅以相应的后期,为废墟人像添上一抹朦胧美,让朦胧梦幻风的废墟人像走起. 首先是道具的打造.说是道具,其实只是一张随处可见的保鲜膜,可以事先准备一张保鲜膜,在上面涂上色彩,包在镜头前作为前景,让原片出现五彩的光线. 这次我选择在保鲜膜上涂上红色和黄色来营造朦胧

  • 打工、生意、事业的区别

    每个成功人士都是从打工做起的,但并不会替别人打一辈子工,而会将自己变成一个生意人,甚至会创造自己的事业.打工.生意.事业的区别,快看看你属于哪一种吧! 打工是一个人为别人做点事情;生意是一个人做点事情;事业是一群人一起干一件一生都干不完的事情. 打工是很多人为个别人赚大钱;生意是一个人赚钱;事业是一群人共同实现一个伟大梦想的同时,顺便赚点用不完的钱. 打工只会赚一种钱--维持生存的工资; 生意是什么赚钱就做什么--狼多肉少; 事业是赚不赚都在做,赚钱和赔钱的时候一样快乐平静--积累财富. 打工身

  • 重新定义智能时尚 京东首发inWatch Fusion智能手表 重新定义智能时尚 京东首发inWatch Fusion智能手表

    1月28日,京东(JD.com)正式预售科技与时尚相融合的inWatch Fushion智能手表.作为国内首款兼 具瑞士朗达机芯+智能机芯双核心的智能手表,inWatch Fushion还镶嵌了12颗Swarovski Zirconia幻彩钻石级切割宝石,并具备inHealth智能运动监测服务,站在时尚与智能的交叉路口,重新定义智能时尚范儿.京东还将独家首发inWatch Fushion,为消费者带来第一时间尝鲜体验. 首发链接:http://sale.jd.com/act/zoVeiMsJUK

  • 暴风影音看电影更流畅的三个技巧 暴风影音看电影更流畅的三个技巧

    暴风影音看电影更流畅的三个技巧可以让我们不再因看电影而导致心情不爽哦,具体的操作技巧如下所示,希望例子能够对各位带来帮助. 一.使MP4电影播放更顺畅 目前MP4已经是很普及的视频格式了,但我们发现暴风影音在播放MP4电影时,有的MP4电影播放非常顺畅,而有的MP4电影却根本无法播放.其实只要稍稍调整一下设置即可.当出现不能正常播放的MP4电影时,可以打开"暴风影音综合设置"对话框,选中里面的"视频解码选项",然后单击"下一步"按钮,在"

  • 小米卖的不是手机 是用户! 小米卖的不是手机 是用户!

    不久前,受邀前往华为终端参观,发现这家手机制造巨头正在发生一些静悄悄的变化,一改我对华为终端的印象. 其一是华为消费者BG已成立一个消费者研究室,它有点类似于情报部门或智囊团,会从全球采购最前沿的智能硬件设备,拿来研究,并提出自己的研究报告.在我看到的一份关于2013年新业务趋势报告中,量化自我.多屏协同.感应技术.移动社交以及移动购物等均在华为关注的视野之内. 其二是华为终端专设了一位主管战略的副总裁芮斌,主抓消费者洞察.这位副总裁带领团队进行了一些有趣的实验,比如给华为主打户外防水的荣耀3手

  • 求页面布局分析解决思路

    求页面布局分析 我是新手,正在努力学习写应用.求帮我分析分析这个页面的布局 ------解决方案-------------------- 这个界面用Preference实现的,搜索下android preference相关资料,你就能明白了.Preference专门用来写设置界面的

  • javascript怎么获取执行脚本后的动态内容

    javascript如何获取执行脚本后的动态内容 页面A中有若干个div区块,各区块可以自由拖动,我想将拖动后的各区块的位置以html文件输出,请教各位,如何获取执行js脚本后页面的内容? ------解决方案-------------------- 获取InnerHTML ------解决方案-------------------- 要保存拖动后各个元素的位置吧?可以使用cookies或者是实用数据库去保存用户的设置.cookie保存的话容易丢失 ------解决方案-------------

  • 单件方式(Singleton Pattern)之C++实现

    单件模式(Singleton Pattern)之C++实现 单件模式确保一个类只有一个实例,并提供一个全局访问点. #include <iostream> #include <string> using namespace std; class Singleton { public: static Singleton* GetInstance(); void print(); void write(string strTmp); private: Singleton(); stat

  • php5.4.3连接sqlserver2000有关问题

    php5.4.3连接sqlserver2000问题 wamp做的服务器php5.4.3,连接sqlserver2000,我在网上查了好多资料也没有连上,哪位大侠有解决方法,感激不尽! --cut-- 人家都能连上,而你连不上.问题应该在你,而不在 php 你至少要说出你的写法,这样别人才能指出不对的地方

热门推荐
  • Percona / MariaDB 的 Thread Pool 真是神奇的东西 Percona / MariaDB 的 Thread Pool 真是神奇的东西 https://www.percona.com/doc/percona-server/5.6/performance/threadpool.html https://mariadb.com/kb/en/mariadb/thread-pool-in-mariadb/#optimizing-server-variables-on-unix https://www.percona.com/blog/2014/01/23/percona-server-improve-scalability-percon
  • 三星A8配置怎么样 三星A8配置怎么样 三星A8手机早前就为大家带来其部分配置,现在这款手机的配置完全曝光,该手机的屏幕有所缩水,传闻中的5.7寸屏幕变成了5.5寸,其他配置基本和之前曝光的一致. Galaxy A8 SM-A8000已经出现在了GFXBench测试数据库中,规格和此前说的基本一致,只有屏幕变小了,显示为5.5寸(分辨率1080p),而不是传闻中的5.7寸. 好吧这也可以理解,5.7寸低于中端手机来说确实有些过大了,况且上边还预留了个Galaxy A9,5.7寸左右给它还差不多. 骁龙615 1.4GHz八核处理器.2
  • 专访周鸿祎:开发者利益和用户体验摆在首位 专访周鸿祎:开发者利益和用户体验摆在首位 360的成功,源于对开发者创新的鼓励,对新型盈利模式的积极探索,对共赢沟通机制的重视与构建--不过,这一切,归根到底,还是基于360对开发者和用户利益的尊重,而这也是360自始至终坚持的信念. 日前,360董事长周鸿祎就此接受了网络导报记者专访. 开发者要把握创新与发展的平衡点 [开发者不要老想着颠覆.用发展的眼光来看待微创新,就不会犯一口吃成个胖子的致命错误.但如果墨守成规或者忽视用户体验,用户就会流失,转投到创新者的怀抱.] 网络导报:对开发者而言,平台开放的首要价值是什么? 周鸿祎:对于开
  • LOL新英雄敖兴上半年将出 设计师称敖兴终于到来? LOL新英雄敖兴上半年将出 设计师称敖兴终于到来? <英雄联盟>在很早以前就一直在说敢于新英雄敖兴的制作,是个三年,新英雄居然还没有出现,很多玩家开始怀疑这个英雄是不是真的会出,终于这一问题开始有了初步的答案. 大家好, 在2013年年末,我们放出了一名还在初始创造期的英雄预览.这是一位名字叫敖兴,雷属性,东方味浓厚的长蛇型中国龙英雄.然后,在过去的这两年里我们对于这只英雄沉默了(除了那么几条在一些比较低调的讨论中出现过的留言).这个锅完全得算在我们头上,而且围绕着这条龙的疑问随着时间的过去而越发增长.我们在不同的地方都看到类似 "熬
  • 白内障手术后吃些什么比较好 白内障手术后吃些什么比较好 方1 鸡肝明目汤 组成:水发银耳25克,鸡肝100克,枸杞15克. 用法:鸡肝洗净切片,加水豆粉.料酒.姜.盐.味精拌匀,与银耳.枸杞同煮汤,佐餐食用. 功效:补益肝肾. 主治:白内障,属肝肾两亏型,视物模糊,头晕耳鸣,腰膝酸 软,面白畏寒,小便清长. 方2 枸杞酒 组成:枸杞200克,白酒或黄酒1 000毫尹 用法:枸杞泡人酒中,1周后即成,日饮30-50毫升. 功效:补益肝肾. 主治:白内障,属肝肾两亏型,视物模糊,头晕耳鸣,腰膝酸软,舌淡,脉细. 本站配图 方3 土豆烧牛肉 组成:土豆50
  • 网站界面设计中要如何为网站创建风格指南 网站界面设计中要如何为网站创建风格指南 旅途归来,一切安好.五天很短暂,回想起来基本只有将就算是蓝色的大海和天空,还有白花花的沙滩;有兴趣的朋友可以到我的微博中看看风景照什么的. 还好,回来之后并没觉得无法适应惯常生活一类,它们之间的区别只是"状态1"与"状态2"这样;把该做的事情立刻开始做起来吧,心里会安一些.之前一篇是"iOS Wow体验 - 第六章 - 交互模型与创新的产品概念"的前半部分.今天插播小文一篇,怎样为网站创建风格指南.进入正文,锵锵锵. 什么是风格指南?简单的说,就
  • QQ自行解除保护模式 QQ自行解除保护模式 经常都会有人抱怨自己的QQ被盗号了,导致重设密码的麻烦.在QQ安全中心中,有对QQ号码进行保护,但如果不想要该模式,也可以自行解除QQ保护模式,下面可以看看操作方法. 1.首先登录QQ的安全中心,输入要解除保护的QQ号码; QQ安全中心 QQ安全中心网址:https://aq.qq.com/007 2.然后就会跳转到下一个界面,显示你的QQ目前存在的盗号风险.可以通过改密恢复,也可以通过手机短信的方式恢复.有时候密码已经被修改了,就可以使用手机短信来解除. 解除保护模式 3.按提示的编辑短信信息
  • 双十一付款花呗开不了解决办法 双十一付款花呗开不了解决办法 蚂蚁花呗关了怎么开 双十一付款花呗开不了解决办法 之前好奇开通了支付宝花呗觉得自己手机花呗购物就将其关闭了,因此导致不少人想再次使用蚂蚁花呗的时候发现开不了. 蚂蚁花呗关了怎么开? 阿里蚂蚁花呗关闭了还能再次开通吗?答案是不一定的,小编是认为看人品吧.有些人等了很久都没办法在申请开通,而有些人甚至在开通额度还会上升.这设计到支付宝后台的审核流程,已经对你信用判定.