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

最新文章
  • 做了一个男装网站,求吐槽 做了一个男装网站,求吐槽

    男生小时候是父母买的衣服,长大后是女朋友,但作为潮男的你应该知道如何挑选衣服. 33号铺希望可以帮助男生挑衣服,帮助女生给男朋友挑衣服. CMS是用WordPress搭建,用了一些插件,也自己写了一些后台设置页.设计是自己弄的.内容是手动填充且略显繁琐在寻求半自动解决方案. http://33pu.net/ --cut-- qiayue在2012-02-10 10:10:5回答到: 看楼主域名是刚注册不久的,还有以下这么多.com的选择 42pu.com 53pu.com 54pu.com 59

  • 三星Note5如何取消通话中提示音? 三星Note5如何取消通话中提示音?

    1.在待机页面下,点击[电话]. 2.点击屏幕上的[更多]. 3.点击[设定]. 4.点击[通话提醒]. 5.点击[通话期间通知]右侧的滑块,灰色代表关闭.

  • Photoshop绘制Q版人物教程 Photoshop绘制Q版人物教程

    先看看效果图 首先,先让我们打开PS,新建一个文档.我一般喜欢A4大小,分辨率当然是300啦! 第二步是在这个文档里新建一个新的透明图层,用来画线稿. 当然我们也可以先随便画个草图,像画素描之前的构图那样! 然后再细画线稿.我习惯把画笔的大小设成10px,硬度必须是100%哦! 有一点要注意,那就是线条和线条之前最好衔接起来,以便上色,要不用填充工具填充颜色的时候就会出现填充出来的现象哦~就像下图那样!!! 线稿画完了,接着我们要在线稿的下面再新建一个图层,开始涂头发.记住是要在线稿图层下哦!

  • 精选腊八节的话题作文3篇

    精选腊八节的话题作文3篇 范文一:腊八节的话题作文 腊月初八是进入腊月的第一个农历节日,在这一天,各地均有喝腊八粥的习俗.在我国,腊八节喝腊八粥和中秋节吃月饼.端午节吃粽子是同等重要的风俗习惯,是千百年来流传的习俗,代表着劳动人民对丰收的希冀与渴望,是我国宝贵的非物质文化遗产.而近年来,腊八正与其他许多民俗节日一样,渐渐淡出现代人的生活,成为远去的记忆-- 这天,以及这天的前前后后,都应该是雪花的节日.它们像少女一样干净质朴,在这个时候轻盈地飘落人间,来了就把一切抱在怀里:村庄.田野.小院.柴草

  • 键盘进化论,雷蛇黑寡妇蜘蛛X幻彩评测 键盘进化论,雷蛇黑寡妇蜘蛛X幻彩评测

    黑寡妇蜘蛛系列机械键盘经过数代升级,不论在灯效还是功能方面,都已经几乎要上天的节奏,但是在外观上全尺寸的黑寡妇蜘蛛基本没有太大变化,依然沿用了第一代的造型.尽管时隔多年,它的外观依然是很前卫的,现在看起来也不落俗套. 雷蛇一直很重视庞大且忠诚的粉丝群体所能够带自己品牌带来的种种好处,所以自然也听到了这一小部分用户的心声,于是2016年4月推出了雷蛇黑寡妇蜘蛛X幻彩机械键盘直接删减了左侧宏编程键,采用金属上盖以及悬浮式键帽,. 灯效展示 我知道你们不喜欢看白底无灯的产品照,所以先来点干货: 灯效方

  • 女子开房装流产 男子玩2P被勒索21万 女子开房装流产 男子玩2P被勒索21万

    女子开房后用鸽子血装流产,男子玩2P被勒索21万.酒后与两女子开房并先后发生性行为,男子以为自己交了桃花运,其实掉进了"陷阱".倒在床单上的鸽子血让他卷进了"意外流产"风波,被要求"赔偿"21万元. 女子开房后用鸽子血装流产,男子同时与两女开房发生性关系,惨遭勒索21万,便宜不是那么好占的,艳遇有风险,约炮需谨慎.吴某,广东廉江人,从事化妆品营销工作. 2013年9月,吴某在熟人张某的鼓动下,参与了麦某.何某等人策划的一起敲诈勒索案.9月22日晚

  • 苹果如何征服中国:红艳、美味、腐朽 苹果如何征服中国:红艳、美味、腐朽

    苹果中国零售店 苹果代工车间中疲惫的女工(新浪科技配图) 导语:美国<外交政策>杂志撰稿人克里斯蒂娜·拉尔森(Christina Larson)日前发表<红艳.美味.腐朽-苹果如何征服中国市场>(Red, Delicious, and Rotten)指出,苹果在中国入乡随俗打起"奢侈牌",以此"征服"中国用户,实现了在中国市场的指数级增长.但漠视社会责任和冷酷无情的一面也使得苹果倍受指责. 以下为文章概要: 营收增长六倍 北京的一位朋友最近向

  • 夏季高温如何防止疾病的发生 夏季高温如何防止疾病的发生

    导读:夏季气温高,很多的食物就会出现提前变质.一些人就会发生易发生细菌性食物中毒和细菌性痢疾.今天小编就和大家说说夏季高温如何防止疾病的发生? 夏季高温如何防止疾病的发生? 预防要点:不喝生水.不吃不洁净的食品,饭前便后要洗净手. 急性出血性眼结膜炎(俗称红眼病)是由肠道病毒引起的一种传染病.该病潜伏期为数小时至5天,一般为1天至2天.临床表现为结膜水肿.充血.点片状结膜充血,伴眼球异物感.流泪.眼痛等症状.病程2天至7天.主要通过接触传播,如共用毛巾.手帕.浴巾等,还可借助水(如游泳池水等)引

  • 学习从实践开始之jQuery插件开发 菜单插件开发 学习从实践开始之jQuery插件开发 菜单插件开发

    虽然这不是多么高深的技术,但对于新手来说还是颇有难度.如果你是一个新手,我希望你能从本文中学到东西:如果你是高手,我希望你能留下你宝贵的意见和建议 一.要做什么插件? 我想要实现一个可以在网站或WEB应用系统中使用,可以灵活的定制外观.简单.易于使用.方便扩展.稳定的菜单插件.它可以被用在网站主导航条上,亦可以用在管理后台. 二.想要的效果是什么? 平时菜单处于收起状态,当鼠标移入显示其下级菜单,以此类推:可以方便的使用html标签设置菜单的结构,也可以使用数组动态生成. 三.设计一下功能 对图

  • 雪人歌词 雪人歌词

    好冷 雪已经积的那么深 Merry Chrismas to you 我深爱的人 好冷 整个冬天在你家门 Are you my snow man 我痴痴 痴痴的等 雪 一片一片一片一片 拼出你我的缘份 我的爱 因你而生 你的手摸出我的心疼 雪 一片一片一片一片 在天空静静缤纷 眼看春天 就要来了 而我也将 也将不再生存 好冷 雪已经积的那么深 Merry Chrismas to you 我深爱的人 好冷 整个冬天在你家门 Am I your snow man 我痴痴 痴痴的等 雪 一片一片一片一片

热门推荐
  • 惊蛰节气简介 惊蛰节气简介 惊蛰是二十四节气之一,每年太阳运行至黄经345度时即为惊蛰,一般在每年的3月5日或6日,这时气温回升较快,渐有春雷萌动,"惊蛰"是指钻到泥土里越冬的小动物被雷震苏醒出来活动. (本站阅读配图) 惊蛰(jīng zhé),是24节气中的第三个节气.每年3月5日或6日,太阳到达黄经345度时为"惊蛰".惊蛰的意思是天气回暖,春雷始鸣,惊醒蛰伏于地下冬眠的昆虫."蛰"是藏的意思. <月令七十二候集解>中说:"二月节,万物出乎震,震
  • QQ拼音输入法怎么更换皮肤? QQ拼音输入法怎么更换皮肤? 您可以通过"属性设置"-"皮肤设置"页面来选择输入法界面皮肤. 除了默认皮肤外,其他皮肤可被删除.当鼠标移到皮肤上,会出现一个小×,点击即可删除选中的皮肤,如下:
  • 爱悠智控体验套装之技术剖析篇 爱悠智控体验套装之技术剖析篇 爱悠最新推出的智控体验套装是一款以技术突破创新为优势,主打智能化联动控制的入门级智能家居小套装.套装中单品拥有多项技术专利,是一款集众多技术优势为一身的智能化套装产品. 一.智能单火开关--单火取电解决安装困难问题,手机远程.定时自动开关灯光 该套装的主打产品爱悠智能单火开关,是全球首款自主研发,享有独家技术专利的z-wave智能单火开关.虽然开关在日常生活中是个很不起眼的东西,但却在智能化家居控制中起到极其重要的作用. 手机远程控制灯光在众多厂商推出的智能家居产品中已经非常常见,但是智能开关的
  • 张悦然的名言 张悦然的名言 张悦然经典语录: 幸福是生生不息,却难以触及的远. 我笑了,我的笑容掉出来,没有地方盛放. 我多么爱你.可是这爱却是飘在半空中的绳索,半截的梯子.无论我多么努力的仰望,都无法触摸到真实的你,所以我只能选择放弃,原谅我的懦弱-- 真正的爱是,无论这个人伤了你还是害了你,你都依然爱. 你就在我的左边,在我的右边,在我的无处不在的世界里. 记忆如此之美,值得灵魂为之粉身碎骨. 我喜欢低着头.我喜欢看见一只爱人的手在我前面.然后我无比喜乐地抓住它.那是我这一辈子的地址. 当天彻底黑透后每个罪恶的人身上沾
  • Painter绘制可爱SD娃娃 Painter绘制可爱SD娃娃 最终效果: 1.先新建一个空白文件,分辨率设为300dpi 2.新建一个图层作为线稿层.用覆盖铅笔勾画线稿,不必太仔细,勾画出大体位置就可以了 3.填充背景色 4.新建3个图层,一个为肤色层,一个为头发层,一个为服饰层 5.用分叉毛笔上色 上第一次色可以大胆些,头发画出大致的方向就行了 然后关闭其他图层,先上最底层皮肤颜色的明暗 6.以此类推 7.然后用橡皮修改 8.删掉线稿层,放大倍数,用覆盖铅笔和分叉毛笔仔细勾画五官 9.用1-2px的覆盖铅笔在头发层画细小的和前额的头发 10.最后用喷枪表
  • QQ怎么设置气泡 QQ怎么设置气泡 QQ怎么设置气泡?手机QQ默认聊天界面都是气泡模式,也就是聊天框有各种各样的图案.如果你习惯了气泡模式的话,可以在电脑端QQ上设置气泡模式哦!下面小编来教教大家电脑QQ设置多彩气泡方法吧! 1.如果你的手机QQ已经设置多彩气泡的话,选择使用多彩气泡你就可以看到聊天界面都是各种各样的气泡啦,如果没有的话,选择设置多彩气泡; 2.当前我们使用的是文本模式,点击切换气泡模式,如图: 3.选择一款自己喜欢的奇葩,勾选后直接关闭,不用找确定项,你选择后,系统会自动默认; 4.这个时候,你在随便打开QQ聊天