首页
所有分类
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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
写出更好的JavaScript之undefined篇（上）
Nov 22 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
Vue将props值实时传递 并可修改的操作
Aug 09 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
tabBar(1) Normal From(1) element-china-area-data(1) MybatisPlus(2) css3 (2) self(1) capture(1) SpringBoot(22) JSON(10) uniapp(4)
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
php文件上传的简单实例
2013/10/19 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP有序表查找之二分查找（折半查找）算法示例
2018/02/09 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
js获取class的所有元素
2013/03/28 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
Ajax基础知识详解
2017/02/17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传（下）
2017/04/21 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
pymysql的简单封装代码实例
2020/01/08 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
pandas针对excel处理的实现
2021/01/15 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
哪些情况下不应该使用索引
2015/07/20 面试题
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
高中军训感言1000字
2014/03/01 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
西岭雪山导游词
2015/02/06 职场文书
股权投资协议书
2016/03/23 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL