仿WINDOW的纯JS超酷颜色选择器_页面背景特效

仿WINDOW的纯JS超酷颜色选择器 ,您可以先修改部分代码再运行.

<TITLE>仿WINDOW的纯JS超酷颜色选择器-模板无忧</TITLE>
<STYLE TYPE="text/css">
 td {font-size: 9pt}
 body {font-size: 10.8pt}
 BUTTON {width:5em;font-size:12px;}
 a{color:blue;}
</STYLE>

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);
  }

if ( RGB.innerText == '')	{
		initColor();
	} else {
	  SelColor.value = DoColor(RGB.innerText, GRAY.innerText);
	  ShowColor.bgColor = SelColor.value;
	}
}
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onclick>
  SelRGB = event.srcElement.bgColor;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=ondblclick>
  // 不用再按确定了
  // 2006-7-26 added by http://www.hbcms.com
  window.returnValue = SelColor.value;
  window.close();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onmouseover>
  RGB.innerText = event.srcElement.bgColor;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onmouseout>
  RGB.innerText = SelRGB;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onclick>
  SelGRAY = event.srcElement.title;
  EndColor();
  // 不用再按确定了
  // 2006-7-26 added by http://www.hbcms.com
  window.returnValue = SelColor.value;
  window.close();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onmouseover>
  GRAY.innerText = event.srcElement.title;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onmouseout>
  GRAY.innerText = SelGRAY;
  EndColor();
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript FOR=Ok EVENT=onclick>
  window.returnValue = SelColor.value;
  window.close();
</SCRIPT>

</HEAD>

<BODY bgcolor=menu style ='overflow:hidden;'>
<span id=hbcms_select_color>
<div align="center"><center><table border="0" cellspacing="10" cellpadding="0"><tr><td>
<TABLE ID=ColorTable BORDER=0 CELLSPACING=0 CELLPADDING=0 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>
</TABLE></td><td>
<TABLE ID=GrayTable BORDER=0 CELLSPACING=0 CELLPADDING=0 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>
</TABLE></td></tr></table></center></div>

</table></center></div>
</span>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<span id=select_color_desc>
<TABLE align=center>
<TR>
	<TD>
<FONT SIZE="3"><B>仿WINDOW的纯JS超酷颜色选择器HBcms改良版本</B></FONT>
<br>超酷效果：同window、office、各种网页编辑器的颜色选择器类似
<br>精巧实用：整个程序只有一个文件，9K，很方便整合到表单中
<br>改良内容：
<BLOCKQUOTE>
1、增加传递颜色的功能。可以很方便的获取原来的颜色。
<br>2、增加了双击颜色返回颜色代码并关闭窗口
<br>3、色彩亮度颜色单击，返回颜色代码并关闭窗口
<br>4、增加了使用帮助
<br>5、增加了原颜色恢复按钮
<br>6、增加了网页使用说明及getMyColor函数</BLOCKQUOTE>

最新改良版本可以在这里下载：<A HREF="http://www.hbcms.com/">http://www.hbcms.com/</A>
<br>为让他人使用本程序避免产生疑惑，使用时请包含本说明文字，谢谢
<P>
</TD>
</TR>
</TABLE>

</span>

<SCRIPT LANGUAGE="JavaScript">
<!--

if ( location.href.indexOf('?') == -1 && location.href.indexOf('#')==-1)	{

function getMyColorTest(t)	{
		if ( location.href.indexOf('http') == 0 ) {
			var old_color = ( t.value.indexOf('#') == 0 ) ? '?'+t.value.substr(1) : '?' + t.value;
		} else {
			var old_color = ( t.value.indexOf('#') == 0 ) ? '%3F'+t.value.substr(1) : '%3F' + t.value;
		}

select_color_url = location.href+old_color;
	  //alert(select_color_url);
	  var color = showModalDialog(select_color_url, "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");
	  if (color != null) {
		  t.value = color;
		  t.style.color = color;
	  }  else {
		  t.focus();
	  }
	  return true;
	}

document.getElementById("hbcms_select_color").innerHTML = '';
	document.write('<table align=center><tr><td><form><P><H4>效果演示：</H4><P>请选择颜色：<input size="10" onclick="getMyColorTest(this)" name="my_color" type="text" value="red" onmouseover="this.style.color=this.value;" /> <P>本程序完全免费：使用方法请看本网页源代码<P> 下载本程序方法：在IE菜单中，点 文件 按钮，点保存即可。或直接用键盘 Ctrl+s 保存<P> <A HREF="http://www.hbcms.com/">进入官方网站</A></form></td></tr></table>');
} else {
	document.getElementById("select_color_desc").innerHTML = '';
}

//-->
</SCRIPT>

</BODY>   
</HTML>

所属频道：页面背景特效/更新时间：2012-11-13

[收藏][报错][返回列表]

仿WINDOW的纯JS超酷颜色选择器_页面背景特效

页面背景特效Rss订阅特效代码搜索

页面背景特效推荐

猜你也喜欢看这些