注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

两款实用取色器的JS代码  

2011-12-21 20:33:59|  分类: js代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

实用取色器1

<style type=text/css>
A {COLOR: #804040;}
A:hover {TEXT-DECORATION: underline}
BODY {FONT-SIZE: 12px;}
</style>
<script language=javascript>
<!--
document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" width=\"0px\" height=\"0px\"></OBJECT>");
var ocolorPopup = window.createPopup();
var ecolorPopup=null;
function colordialogmouseout(obj){
obj.style.borderColor="";
obj.bgColor="";
}
function colordialogmouseover(obj){
obj.style.borderColor="#0A66EE";
obj.bgColor="#EEEEEE";
}
function colordialogmousedown(color){
ecolorPopup.value=color;
//document.body.bgColor=color;
ocolorPopup.document.body.blur();
}
function colordialogmore(){
var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value);
sColor = sColor.toString(16);
if (sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
ecolorPopup.value="#"+sColor.toUpperCase();
//document.body.bgColor="#"+sColor.toUpperCase();
ocolorPopup.document.body.blur();
}
function colordialog(){
var e=event.srcElement;
e.onkeyup=colordialog;
ecolorPopup=e;
var ocbody;
var oPopBody = ocolorPopup.document.body;
var colorlist=new Array(40);
oPopBody.style.backgroundColor = "#f9f8f7";
oPopBody.style.border = "solid #999999 1px";
oPopBody.style.fontSize = "12px";
 colorlist[0]="#000000"; colorlist[1]="#993300"; colorlist[2]="#333300"; colorlist[3]="#003300";
  colorlist[4]="#003366"; colorlist[5]="#000080"; colorlist[6]="#333399"; colorlist[7]="#333333";
 colorlist[8]="#800000"; colorlist[9]="#FF6600"; colorlist[10]="#808000";colorlist[11]="#008000";
  colorlist[12]="#008080";colorlist[13]="#0000FF";colorlist[14]="#666699";colorlist[15]="#808080";
 colorlist[16]="#FF0000";colorlist[17]="#FF9900";colorlist[18]="#99CC00";colorlist[19]="#339966";
  colorlist[20]="#33CCCC";colorlist[21]="#3366FF";colorlist[22]="#800080";colorlist[23]="#999999";
 colorlist[24]="#FF00FF";colorlist[25]="#FFCC00";colorlist[26]="#FFFF00";colorlist[27]="#00FF00";
  colorlist[28]="#00FFFF";colorlist[29]="#00CCFF";colorlist[30]="#993366";colorlist[31]="#CCCCCC";
 colorlist[32]="#FF99CC";colorlist[33]="#FFCC99";colorlist[34]="#FFFF99";colorlist[35]="#CCFFCC";
  colorlist[36]="#CCFFFF";colorlist[37]="#99CCFF";colorlist[38]="#CC99FF";colorlist[39]="#FFFFFF";
 ocbody = "";
  ocbody += "<table CELLPADDING=0 CELLSPACING=3>";
  ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+e.value+"\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">当前颜色</td></tr>";
  for(var i=0;i<colorlist.length;i++){
  if(i%8==0)
  ocbody += "<tr>";
  ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid;\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" onMouseDown=\"parent.colordialogmousedown('"+colorlist[i]+"')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+colorlist[i]+"\"><tr><td></td></tr></table></td>";
  if(i%8==7)
  ocbody += "</tr>";
  }
  ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" style=\"border:1px solid;font-size:12px;cursor:default;\" onMouseDown=\"parent.colordialogmore()\">其它颜色...</td></tr>";
  ocbody += "</table>";
 oPopBody.innerHTML=ocbody;
  ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body);
  }
</script>
  <input name="sel1" type="text" onfocus="colordialog()"value="点文本框,选择颜色!">

 

 

实用取色器2

<style type=text/css>
A {COLOR: #4D4DB3;}
A:hover {TEXT-DECORATION: underline}
BODY {FONT-SIZE: 12px;}
TABLE {FONT: 12px Tahoma, Verdana;}
INPUT {FONT: 12px Tahoma, Verdana;}
</style>
<SCRIPT language=JavaScript>
var SelRGB = '';
var DrRGB = '';
var SelGRAY = '120';
var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');
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;
 if(DrRGB != SelRGB)
  {
  DrRGB = SelRGB;
  for(i = 0; i <= 30; i ++)
  GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);
  }
 SelColor.value = DoColor(RGB.innerText, GRAY.innerText);
  ShowColor.bgColor = SelColor.value;
  }
</SCRIPT>
<SCRIPT event=onclick for=ColorTable language=JavaScript>
  SelRGB = event.srcElement.bgColor;
  EndColor();
</SCRIPT>
<SCRIPT
event=onmouseover for=ColorTable language=JavaScript>
  RGB.innerText = event.srcElement.bgColor;
  EndColor();
</SCRIPT>
<SCRIPT event=onmouseout for=ColorTable language=JavaScript>
  RGB.innerText = SelRGB;
  EndColor();
</SCRIPT>
<SCRIPT
event=onclick for=GrayTable language=JavaScript>
  SelGRAY = event.srcElement.title;
  EndColor();
</SCRIPT>
<SCRIPT
event=onmouseover for=GrayTable language=JavaScript>
  GRAY.innerText = event.srcElement.title;
  EndColor();
</SCRIPT>
<SCRIPT
event=onmouseout for=GrayTable language=JavaScript>
  GRAY.innerText = SelGRAY;
  EndColor();
</SCRIPT>
<SCRIPT
event=onclick for=Ok language=JavaScript>
  window.returnValue = SelColor.value;
  window.close();
</SCRIPT>
<DIV>
<TABLE border=0 cellPadding=0 cellSpacing=10>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellPadding=0 cellSpacing=0 id=ColorTable style="CURSOR: hand">
<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=8></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>
 <TBODY></TBODY></TABLE></TD>
<TD>
<TABLE border=0 cellPadding=0 cellSpacing=0 id=GrayTable
  style="CURSOR: hand">
<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=4 width=20></TD></TR>');
</SCRIPT>
<TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>
<DIV>
<TABLE border=0 cellPadding=14 cellSpacing=0>
<TBODY>
<TR>
<TD align=middle rowSpan=2>
<TABLE border=1 cellPadding=0 cellSpacing=0 height=70 id=ShowColor width=40>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD>
<TD rowSpan=2>基色: <SPAN id=RGB></SPAN><BR><BR>亮度: <SPAN id=GRAY>120</SPAN><BR>代码: <INPUT id=SelColor size=8></TD>
<TD><BUTTON type=reset>重选</BUTTON></TD></TR>
<TR>
<TD><BUTTON onclick=window.close();>关闭</BUTTON>
</TD>
</TR>
</TBODY>
</TABLE><hr>
<FONT size=2>    ☆ <a href="
http://xuhui-8491.blog.163.com/" target="_blank">火力光波网易博客</a> ☆ 欢迎您光临!</FONT>
</DIV>

 
 

 预览效果: 实用取色器1实用取色器2相关1 相关2  

 

70种简单常用的JS代码 - 火力光波 - 火力光波的博客 

  评论这张
 
阅读(1286)| 评论(8)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017