仿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 >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 );
} else {
	document.getElementById("select_color_desc").innerHTML = '';
}

//-->
</SCRIPT>

</BODY>   
</HTML>

所屬頻道：頁面背景特效/更新時間：2012-11-13

[收藏][報錯][返回列表]

相關頁面背景特效：

仿WINDOW的純JS超酷顏色選擇器_頁面背景特效

頁面背景特效Rss訂閱特效代碼搜索

頁面背景特效推薦

猜你也喜歡看這些