首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 21, 2016

本文实例讲述了JS实现的RGB网页颜色在线取色器。分享给大家供大家参考，具体如下：

运行效果图如下：

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>

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

- Author -

ganchang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
js querySelector() 使用方法
Dec 21 #Javascript
简单实现Vue的observer和watcher
Dec 21 #Javascript
使用BootStrap建立响应式网页——通栏轮播图（carousel）
Dec 21 #Javascript
js实现开启密码大写提示
Dec 21 #Javascript
js实现的在线调色板功能完整实例
Dec 21 #Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 #Javascript
清除输入框内的空格
Dec 21 #Javascript
嵌套(1) Sqlite(2) 安卓(1) 多维数组(1) 移动开发(2) Spring Boot(5) android studio(3) OpenLayer(1) IDEA(2) 多线程(6)
You might like
php网页后退不再出现过期
2007/03/08 PHP
php header()函数使用说明
2008/07/10 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
php探针不显示内存解决方法
2019/09/17 PHP
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python中正则表达式详解
2017/05/17 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python的pip安装以及使用教程
2018/09/18 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
班级安全教育实施方案
2014/02/23 职场文书
管理建议书范文
2014/05/13 职场文书
拉歌口号大全
2014/06/13 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python