JS实现的RGB网页颜色在线取色器完整实例

2019-11-19 18:21:11

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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 backgroundif(myColor!="") { if(myColor.length !=7 || myColor.charAt(0)!="#")  {  alert("颜色值加#至少7位，请检查！");  $("SelColor").value="";  } else if(!isAllNum16(myColor)) { alert("颜色代码错误，请检查/n 颜色代码示例:#ff6600"); $("SelColor").value=""; } else{  return myColor;  } }}//检查颜色值-ENDvar 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 Beginif(!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 Endfunction 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.VeVB.COm/color/rgb_color_generator

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全：
http://tools.VeVB.COm/color/jPicker

在线网页调色板工具：
http://tools.VeVB.COm/color/color_picker

在线颜色选择器工具/RGB颜色查询对照表：
http://tools.VeVB.COm/color/colorpicker

更多关于JavaScript相关内容可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：详解Nodejs基于mongoose模块的增删改查的操作

下一篇：js querySelector() 使用方法