JS实现的RGB网页颜色在线取色器完整实例
更新时间:2017年1月9日 10:00 点击:1972
本文实例讲述了JS实现的RGB网页颜色在线取色器。分享给大家供大家参考,具体如下:
运行效果图如下:
完整实例代码如下:
<html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta name="description" content="在线取色器"> <meta name="keywords" content="在线取色器"> <title>RGB网页颜色在线取色器</title> <style type="text/css"> <!-- a.g:link { text-decoration: none; color: #0000FF; font-size: 13px; } a.g:visited { text-decoration: none; color: #0000FF; font-size: 13px; } a.g:hover { text-decoration: none; color: #FF0000; font-size: 13px; } .gray{color:#666666} .f12{font-size:12px} .box{padding:2px;border:1px solid #CCC} --> </style> <script language="javascript"> <!-- function h(obj,url){ obj.style.behavior='url(#default#homepage)'; obj.setHomePage(url); } function $(id){ obj=document.getElementById(id); if (obj==null) obj=document.all.id; return obj; } //检查颜色值-Begin function isNum16(ch) { if (ch >= '0' && ch <= '9')return true; if (ch >= 'A' && ch <= 'F')return true; if (ch >= 'a' && ch <= 'f')return true; return false; } function isAllNum16(str1) {//判断颜色值。除第一个字符#外的任一个值是否大于等a,A,0,小于等于f,F,9,否则报错。 for (i=1; i<str1.length; i++) { if (!isNum16(str1.charAt(i))) { return false; } } return true; } function checkCol(myColor) { //made by jiarry,input color value to change background if(myColor!="") { if(myColor.length !=7 || myColor.charAt(0)!="#") { alert("颜色值加#至少7位,请检查!"); $("SelColor").value=""; } else if(!isAllNum16(myColor)) { alert("颜色代码错误,请检查\n 颜色代码示例:#ff6600"); $("SelColor").value=""; } else{ return myColor; } } } //检查颜色值-END var SelRGB = '#808080'; var DrRGB = ""; var SelGRAY = '120'; var SelCol=""; var baseCol="#808080"; var light="120"; var RGB=$("RGB"); var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'); //add innerText to FireFox Begin if(!document.all){ HTMLElement.prototype.__defineGetter__ ( "innerText", function () { var anyString = ""; var childS = this.childNodes; for(var i=0; i<childS.length; i++) { if(childS[i].nodeType==1) anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText; else if(childS[i].nodeType==3) anyString += childS[i].nodeValue; } return anyString; } ); } ////add innerText to FireFox End function ToHex(n) { var h, l; n = Math.round(n); l = n % 16; h = Math.floor((n / 16)) % 16; return (hexch[h] + hexch[l]); } function DoColor(c, l) { var r, g, b; r = '0x' + c.substring(1, 3); g = '0x' + c.substring(3, 5); b = '0x' + c.substring(5, 7); if(l > 120) { l = l - 120; r = (r * (120 - l) + 255 * l) / 120; g = (g * (120 - l) + 255 * l) / 120; b = (b * (120 - l) + 255 * l) / 120; }else { r = (r * l) / 120; g = (g * l) / 120; b = (b * l) / 120; } return '#' + ToHex(r) + ToHex(g) + ToHex(b); } function EndColor() { var i; var GrayTable=$("GrayTable"); if(DrRGB != SelRGB) { DrRGB = SelRGB; for(i = 0; i <= 30; i ++) GrayTable.rows[i].bgColor = DoColor(SelRGB, 240 - i * 8); } var SelColor=$("SelColor"); var RGB=baseCol; var GRAY=light; var ShowColor=$("ShowColor"); SelColor.value = DoColor(baseCol, light); ShowColor.bgColor = SelColor.value; document.getElementById('copytip').innerHTML=''; } function ctOut(e) { baseCol=SelRGB; EndColor(baseCol); } function ctClick(e) { SelRGB = e.bgColor; EndColor();} function ctOver(e){ baseCol = e.bgColor.toUpperCase(); EndColor(); } function gtOver(e){ light = e.title; EndColor(); } function gtOut() { light = SelGRAY; EndColor(); } function gtClick(e){ SelGRAY = e.title; EndColor(); } function okClick(){ var SelColor=$("SelColor"); self.parent.setColor(SelColor.value); } function inpCol(o){ var l=o.value; if (l.length==7){ $('ShowColor').bgColor=checkCol(o.value);} else if(l.length>7){ o.value=l.substring(0,7); alert("颜色代码加#不能超过7位"); } } --> </script> </head> <body bgcolor=#ffffff text=#000000 vlink=#0033CC alink=#800080 link=#0033cc topmargin="0"> <p> </p> <table align="center" width="700"><tr><td> </td></tr> <tr><td> </td></tr> </table> <table width="720" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td bgcolor="#40A6DD" width="720"><b style="color:#FFFF00; font-size:16px;"> 颜色选择器</b></td> </tr> <td class="padd10"> <br> <table width="720" border="0" cellpadding="0" cellspacing="0" class="colTab"> <tr align="left" valign="top"> <td width=515> <table border="0" cellspacing="0" cellpadding="0"><tr><td> <span class="gray f12">颜色:</span> <div class="box" style="padding:0;width:422px !important;width:424px"> <TABLE ID=ColorTable BORDER=0 CELLSPACING=2 CELLPADDING=0 style='cursor:pointer'> <SCRIPT LANGUAGE=JavaScript> function wc(r, g, b, n) { r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15; g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15; b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15; document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=12 onmouseover="ctOver(this)" onmouseout="ctOut(this)" onmousedown="ctClick(this)"></TD>'); } var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0); for(i = 0; i < 16; i ++) { document.write('<TR>'); for(j = 0; j < 30; j ++) { n1 = j % 5; n2 = Math.floor(j / 5) * 3; n3 = n2 + 3; wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)), (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)), (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i); } document.writeln('</TR>'); } </SCRIPT> </TABLE> </div> </td><td valign="top" style="padding-left:30px "> <span class="gray f12">亮度:</span> <div class="box" style="width:20px !important;width:26px;"> <TABLE ID=GrayTable BORDER=0 CELLSPACING=0 CELLPADDING=0 style='cursor:pointer'> <SCRIPT LANGUAGE=JavaScript> for(i = 255; i >= 0; i -= 8.5) { document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=5 width=20 onmouseover="gtOver(this)" onmouseout="gtOut()" onmousedown="gtClick(this)"></TD></TR>'); } </SCRIPT> </TABLE> </div> </td></tr> </table> </td> <td width=87 valign="top"> <span class="gray f12">选中颜色:</span> <div class="box" style="width:50px !important;width:54px "> <table ID=ShowColor width="50" height="24" cellspacing="0" cellpadding="0"> <tr><td></td></tr> </table> </div> </td> <td width="128" valign="top"> <span class="gray f12">代码:</span><br> <INPUT TYPE=TEXT class="colInp" ID=SelColor value="#FFFFFF" SIZE=7 onKeyUp="inpCol(this)"> <input type=button style="visibility:hidden!important;visibility:visible" onClick="document.getElementById('SelColor').select();clipboardData.setData('text',document.getElementById('SelColor').value); document.getElementById('copytip').innerHTML='代码已复制到剪贴板';" value=" 复制 "><div id="copytip" class="gray f12" style="margin-top:5px"></div></div><div style="visibility:hidden">基色 : <SPAN ID=RGB>#000000</SPAN><BR>亮度 : <SPAN ID=GRAY>120</SPAN><BR></div></td> </tr> </table> <script> EndColor(); </script> </td> </tr> </table> <center> </center> </body> </html>
PS:这里再为大家推荐几款本站的相关在线工具:
在线RGB、HEX颜色代码生成器:
http://tools.jb51.net/color/rgb_color_generator
RGB颜色查询对照表_颜色代码表_颜色的英文名称大全:
http://tools.jb51.net/color/jPicker
在线网页调色板工具:
http://tools.jb51.net/color/color_picker
在线颜色选择器工具/RGB颜色查询对照表:
http://tools.jb51.net/color/colorpicker
更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
上一篇: js原生之焦点图转换加定时器实例
下一篇: 解决拦截器对ajax请求的拦截实例详解
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03