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

最新文章
  • 这真是一个好时代

    让你能在10分钟内一次随机开撸英雄的好时代. 三体,谁有三体,借我我看下啊啊啊啊. --cut--

  • 有没有有效的方法下载 mediafire 网盘的文件 有没有有效的方法下载 mediafire 网盘的文件

    求个不用代理的方法下载mediafire网盘文件 或者网盘中转站也行啊 --cut-- arefly在2015-02-14 20:14:1回答到: 这个下载服务器没被墙吧,我前几天还下来着,速度也还行啊 aekt5716在2015-02-14 20:19:3回答到: @arefly 我怎么打不开 luo362722353在2015-02-14 21:53:4回答到: 自己架设一个rapidleech-就好了 sli在2015-02-14 21:54:2回答到: 肉翻 hjny在2015-02-1

  • 五一劳动节放假通知书怎么写

    五一劳动节放假通知书怎么写 根据国务院<关于修改<全国年节及纪念日放假办法>的决定>,为便于各地区.各部门及早合理安排节假日旅游.交通运输.生产经营等有关工作,经国务院批准,现将2012年五一劳动节 放假调休日期的具体安排通知如下: 五一劳动节放假几天 4月29日至5月1日放假调休,共3天.其中4月29日(星期日)为公休.4月28日(星期六)公休调至4月30日(星期一).5月1日(星期二. "五一"国际劳动节)为法定节假日,即4月29日(星期日).30日(星期一

  • PPS娱乐圈如何查看微博图片 PPS娱乐圈如何查看微博图片

    在浏览带有图片的微博时,你可能会觉得图片比较小.其实那只是缩略图,你只要将鼠标移到图片上就会出现放大镜图标,点击一下,就会看到大图模式. 在大图模式上方有"收起"."查看原图"."向左转"."向右转"四个功能按钮,点击"查看原图"后会在新窗口打开该图片的原图,点击"收起"则返回缩略图模式,"向左转"和"向右转"会改变图片方向.

  • 让win7双系统强势入驻Macbook Air

    1.在macbook中打开Finder,找到Applications这一项,打开当中的BootCamp. 2.点击BootCamp,进入其软件界面,根据其提示选择"继续".点击"继续"后,会看到一个界面写着电脑系统"Create a Partition for Windows"(制作用于windows的分区),在这里你可以建立一个Windows分区,即在Mac系统与windows系统中分配硬盘空间.Windows 7系统大概10GB空间就可以,如

  • 智能家居无法真正进入老百姓家中的五大原因 智能家居无法真正进入老百姓家中的五大原因

    旧时王谢堂前燕,飞入寻常百姓家.我们今天不是来感慨藏而不露,寄物咏怀滴,而是想和大家聊聊智能家居和老百姓之间的那点微妙关系.智能家居发展这么多年,雷声大雨点小,产业红火,市场平淡,单从我们自己身边的家居环境来看,距离那些智能家居厂商描绘的美好场景还非常远,智能化就更谈不上了.那为什么智能家居的普及一直步履维艰?如何能让智能家居的产品真正飞入寻常百姓之家呢?抛开技术,就只从普通消费者的感知和体验角度去分析,且看魔蜂来历数智能家居真正进入老百姓家中的五大门槛,没有解决方案,只希望提出来可以启发大家去

  • 90后QQ情侣网名_抬头望蓝蓝de天 | '低头看傻傻de.

    无法兑现的承诺, | 无法履行的诺言. 丶妳是我无法抵抗的温柔 | 丶你是我无法忘却的霸道 左边的心脏想你 | 想你的左边心脏 亲爱的.我们不会分开 | 亲爱的.我们不要分开 丶妳是我想独占的温柔 | 丶你是我想依赖的霸道 丶妳的专属回忆我主演 | 丶你的专属幸福我赞助 ℡硪愛的人不愛我 | 愛我的人我不愛℡ 卐想给你温柔的拥抱 | 卍想给你亲切的吻 我背对你奔跑散落的离骚 | 我面向你奔跑飘落的骄傲 我爱你,天长地久 | 你爱我,地久天长 -则不痛 | -心不动 不同的是爱恋的爱恋 | 不变的

  • Microsoft Windows快捷方式LNK文件自动执行代码漏洞攻击(MS10-046)

    1.漏洞定义 Windows支持使用快捷方式或LNK文件.LNK文件是指向本地文件的引用,点击LNK文件与点击快捷方式所指定的目标具有相同的效果. Windows没有正确地处理LNK文件,特制的LNK文件可能导致Windows自动执行快捷方式文件所指定的代码.这些代码可能位于USB驱动.本地 或远程文件系统.光驱或其他位置,使用资源管理器查看了LNK文件所在位置就足以触发这个漏洞.默认下Windows启动了自动加载和自动播放功能,因此 在连接可移动设备(如USB闪存)后Windows会自动打开资

  • 小弟我想用js遍历到表格类的数据,为什么不起效

    我想用js遍历到表格类的数据,为什么不起效 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" c

  • SQL动态条件转LINQ,

    SQL动态条件转LINQ,急,在线等 string s; string b; var query = from u in User where u.name == "王二": 需要判断后加上条件,比如,当s为空的时候,需要在检索条件里面加上age < 20,当b为空的时候,sex = "male" 请问该如何写呢? ------最佳解决方案-------------------- 不就是拼接查询么: http://blog.csdn.net/q10777054

热门推荐
  • 宠物说APP专家全国巡回讲座 开创行业新时代 宠物说APP专家全国巡回讲座 开创行业新时代 2015年宠物行业的热度被宠物说APP举办的一场宠物集体婚礼彻底点燃.继宠物集体婚礼后,作为宠物社区的领导者-宠物说APP,面向全国千万养宠人士,盛大开启史上最大规模的宠物行业专家讲座--"宠物说APP专家全国巡回讲座" 活动,预计在全国30多个城市巡回举办超过50场,开启宠物行业的新时代. 宠物说专家巡回讲座 针对用户科学养宠知识的普及,联合百家宠物医院及宠物专业机构,汇集百位宠物行业的专家,在全国30多个城市巡回举办50场左右的线上专家讲座.讲座内容包括宠物医疗.宠物营养.宠友美容
  • iphone6电量掉的快怎么办 iphone6怎么设置省电技巧 iphone6电量掉的快怎么办 iphone6怎么设置省电技巧 入手了iphone6本想好好体验却发现耗电非常快,iphone6电量掉的快怎么办?有什么苹果手机的省电攻略值得推荐?下面为大家带来iphone6怎么设置省电技巧. iphone6电量掉的快怎么办 iphone6怎么设置省电技巧 [减少出现在锁屏上的推送通知数量] 在设置-通知-相关应用,并对是否在锁定屏幕上显示进行设定. [查看哪些应用最耗电 然后决定是否删除] 设置后-通用-用量中的电池用量,就知道最近一天使用了哪些应用,以及哪款应用最耗电.将耗电且不常用的直接删除卸载掉. [调低屏幕亮度]
  • 吃饭太快的坏处 吃饭太快的坏处 吃饭快的坏处有哪些?中国人一直讲究细嚼慢咽,认为狼吞虎咽的吃饭方式不仅有碍观瞻,对健康也不好.对于吃饭快的坏处,除了消化不良.容易发胖,还有那些是我们不知道的? 本站阅读配图 1.食物的营养质量太低 大家仔细地想一想,什么食物吃得快?什么食物吃得慢?当然是精白细软的食物吃得快,粗糙有纤维的食物吃得慢.如果一餐饭能够不到五分钟就吃完,不用说,这餐食物的多样化程度不高,其中的蔬菜很少,水果也很少,没有粗粮和豆类,基本上就是精白米精白面食品加上肉类为主,甚至干脆就是单纯的泡面.汉堡.馅饼.速冻饺子之类