位置:首页 » 教程 » 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 用 ReactiveCocoa 的多嘛

    今天看到 GitBuckit 用的就是 MVVM+ReactiveCocoa ,想问问大家怎么看这个技术? 主要感觉学习成本还是比较高的,后期如果换人维护,估计找到熟悉这个的工程师还比较难吧? --cut--

  • Github issue 每条评论都可以加 up down 等操作了 Github issue 每条评论都可以加 up down 等操作了

    https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments 一开始还怀疑是用了某个插件,从此都不需要敲+1 了. --cut-- cai314494687在2016-05-09 07:20:39回答到: :+1:

  • PHPCMS 频道模板栏目循环调用优化

    在phpcms 默认模板中,category.html是频道封面模板,但它的栏目是一行调用2个,有的同学想改成一行调用3个或更多,但又想继续用默认的循环代码.今天我就给大家小献一下(当然,此方法仅适合小白同学,高手自有自己的方法了). 首先找到默认模板中的循环代码: {php $j=1;} {loop subcat($catid) $v} {php if($v['type']!=0) continue;} <div class="box cat-area" {if $j%2==1

  • 给“胆小鬼”的10个街头摄影技巧 给“胆小鬼”的10个街头摄影技巧

    街头摄影是很多人都喜爱的拍摄题材,同时又是最令人头疼的题材之一.在喧闹的街头,举起镜头对准别人按动快门对很多人来说并不容易.这里有10个专为"胆小鬼"准备的小技巧,帮助你在不引起别人注意的情况下完成拍摄. 1. 隐入人群 如果你去的是一个著名的旅游景点,那么恐怕不带相机才会格外醒目.在这种环境中你可以放心拍摄,几乎没有人会注意. 2. 守株待兔 有时你已经在头脑中计划好了一幅完美的画面.此时就只需要架好相机,对好焦,然后等待有人走到预设的位置上就可以拍了.如果别人发现了你,最多也是觉得

  • 最暴肥的饮食搭配 最暴肥的饮食搭配

    这和食物的分类有关,有一种分法是,将食物分为密集性和非密集性食物.除了水果和蔬菜不属密集食物之外,其他食物,如肉类.奶类和五谷类都是属于密集食物.而食物配搭法是主张我们在同一餐之内只可用一种密集食物来配合蔬菜进食. ●蛋糕+豆腐 这和食物的分类有关,有一种分法是,将食物分为密集性和非密集性食物.除了水果和蔬菜不属密集食物之外,其他食物,如肉类.奶类和五谷类都是属于密集食物.而食物配搭法是主张我们在同一餐之内只可用一种密集食物来配合蔬菜进食.像含蛋白质的豆腐和含淀粉质的蛋糕,都属于密集性食物,同吃

  • 一个已婚女人对于婚姻对于幸福的感悟 一个已婚女人对于婚姻对于幸福的感悟

    一个已婚女人,对于婚姻对于幸福的感悟 有家就是幸福 不需要太大的地方,也不需要装璜的怎么富丽堂皇,但必须是在你的精心打理和细心呵护下充满温馨和爱意的家,无论外面的世界多精彩,外面的风景都美好,都留不住你回家的脚步,家是你心中最美的一道风景线,谁也代替不了:当你不开心的时候,你会想到家;当你外出的时候,你最想的是家;当你每天下班,迫不及待想回的是家;你最留恋的还是家--家是温馨的港湾;家是女人心灵的栖息地;家有着期盼等待你的亲人.即使有时出现波浪,但是都不能阻止你义无返顾地奔向它的怀抱. 有个守候

  • Surface RT成鸡肋产品? 降价三成意在清库存

    昨日,北京商报记者登录微软中国官方网站看到,Surface RT各个版本已经降价1200元,最高降幅约32.5%,如32GB祼机版由之前的3688元降至2488元.业界专家认为微软此举意在清理Surface RT库存,其背后则意味着这一"鸡肋"的产品难逃出局命运. 微软中国的相关负责人称,促销活动属于短期活动,主要是为了攻占电子产品销售旺季的暑期市场,对于Surface RT目前的实际销量和暑期销售预期均不便透露,而Surface家族的另一款产品Surface Pro不参与此次促销活动

  • 猎豹移动“豹变”背后:国际化与移动化

    年初,猎豹移动以5800万美元收购全球移动营销公司MobPartner.消息宣布后,猎豹移动CEO傅盛曾在公开信中表示:"这意味着猎豹已成为一家彻底的全球移动互联网公司." 突破分销瓶颈 踏上全球征途 移动化和国际化是猎豹给自己打的两个标签.从工具类应用起家的猎豹最早只以做分销挣钱,为老主顾Facebook 这样的广告主提供流量,这在无形中也囚禁了其继续发展.转眼进入 2015年,不安分的猎豹一直试图打破这种天花板,希望依靠平台来实现盈利,无论是投资社交移动广告软件提供商 Naniga

  • 如何使用扫描功能?(SL-M2876HN,SL-M2676FH) 如何使用扫描功能?(SL-M2876HN,SL-M2676FH)

    1.将电脑和打印机用数据线连接. 2.安装扫描程序,如果您有光盘,直接用光盘安装即可,如果没有光盘,可以通过三星官网下载扫描程序.(扫描软件请点击这里下载,扫描驱动请点击这里下载.) 3.安装程序完毕后,将单页文档正面朝下放在文档玻璃板上或将文档正面朝上装入进稿器. 4. 打开[Easy Document Creator]软件,点击[扫描]. 注意: 如果[扫描]显示灰色,不能选择,这时请点击[搜索],再选择[开始搜索],在搜索结果里面选择您的打印机,然后按[确认]就可以了. 5. 选择[文档扫

  • 校长点评“我校主题课程实施”

    校长点评"我校主题课程实施"主要是介绍一个活动之后的一个总结了,是领导的都会需要发话了,这里整理了一篇不错的文章供各位参考. 1. 是一次重大的突破,不是常规的语文课,也不是其他学科的课,是一节综合性的课. 结合高考命题的要求来谈,强调语文学科的综合性,语文学科的题型也许会出现多学科的,多领域.语文强调应用性,情境性. 2. 这是主题课程中的一节课,是语文学科进入主题课程的体现. 想法:1.如果处理好这些问题,更有课程的味道. A. 如果在开场前能有前延,和前面的活动关联起来会更好.

热门推荐
  • 请问男士凉鞋有优雅/简洁的方案么? 请问男士凉鞋有优雅/简洁的方案么? 觉得没有满意的, Google了下没有合适的信息.请问大家有相关经验分享么? --cut-- holmesabc在2014-07-24 21:20:1回答到: 拖鞋 littlewey在2014-07-24 21:31:3回答到: @holmesabc orz buobuk在2014-07-24 21:35:2回答到: 热风不错的 cxe2v在2014-07-24 21:38:0回答到: 凉鞋真心没有优雅的 Ellison在2014-07-24 21:44:5回答到: 一直都觉得凉鞋好丑,夏天都
  • 首台光学望远镜在南极中山站投用 追寻宜居星球 首台光学望远镜在南极中山站投用 追寻宜居星球 中国科学院国家天文台南京天文光学技术研究所6日发布消息称,中国在南极中山站投用的第一台光学望远镜--"南极亮星巡天望远镜"(简称BSST)出光,拍摄到璀璨明亮的杜鹃座星团,并正式投入实际观测. 正在中山站越冬值守的中国极地研究中心副研究员姜鹏,通过卫星电话向记者介绍,BSST"借助"极夜进行24小时不间断监测,这是其它天文台址不可能实现的.它将追寻可供"太空移民"的宜居星球,为行星起源.生命演化提供科研数据. BSST口径为300mm,能实现多波
  • 美国宇航局最佳图片 南美洲出现罕见奇观滚轴云 美国宇航局最佳图片 南美洲出现罕见奇观滚轴云 乌拉圭罕见卷轴云 从图片中看起来像是一条从海洋通向天堂的高速公路,延伸直入云霄.但是,它实际上是在南美洲罕见的"滚轴云". 这张图片是2009年1月在乌拉圭Maldonado的Las Olas沙滩镇所拍摄的,一道滚轴云向远方延伸,令人惊叹的漫长.美国宇航局对此图印象深刻,将其放到官方网站上,并且当选为"每日最佳图片". 天文学家罗伯特-涅米罗夫和杰里-邦内尔认为,这种罕见的滚轴云,可能是由附近的冷锋而推进产生的."往前推进的暴风前缘导致湿暖空气上升,冷却低
  • 如何选择WordPress主机空间? 如何选择WordPress主机空间? 导读:"买虚拟主机".接受"有条件的赞助"都是傻逼行为,这一点我深有体会.虚拟主机三天两头出问题,不是速度慢就打不开;而"有条件的赞助",不是要你"权重"就是要你广告位,时间长了能把你最有优势.最挣钱的资源都要走,如果不给,嘿嘿看我不三天两头给你弄出点问题我就不叫IDC.后面醒悟了,价格越贵的服务就越好,且不受约束,在主机方面,就买能力范围内最贵的. 这两年建站,除了用户有特别要求外,基本上都是使用WordPress建站,简单