<HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>HBcms颜色选择器</TITLE>
<STYLE TYPE="text/css">
td {font-size: 9pt}
body {font-size: 10.8pt}
BUTTON {width:5em;font-size:12px;}
</STYLE>
<SCRIPT LANGUAGE=JavaScript>
/******************************************************************
// 程序名称:仿WINDOW的纯JS超酷颜色选择器HBcms改良版本
// 超酷效果:同window、office、各种网页编辑器的颜色选择器类似
// 改良内容:
// 1、增加传递颜色的功能。可以很方便的获取原来的颜色。
// 2、增加了双击颜色返回颜色代码并关闭窗口
// 3、色彩亮度颜色单击,返回颜色代码并关闭窗口
// 4、增加了使用帮助
// 5、增加了原颜色恢复按钮
// 6、增加了网页使用说明及getMyColor函数
// 最新改良版本可以在这里下载:http://www.hbcms.com
// 为让他人使用本程序避免产生疑惑,使用时请包含本说明文字,谢谢
//
// ########### 网页中使用说明:###########
//
// 1、先将本文件拷贝到您网站的目录,不需要做任何修改
// 范例如:根目录下位置:/script/select_color.html
// 2、在你的网页中加载getMyColor函数,范例如下:
function getMyColor(t) {
var old_color = ( t.value.indexOf('#') == 0 ) ? '?'+t.value.substr(1) : '?' + t.value;
var color = showModalDialog("/script/select_color.html"+old_color+"", "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");
if (color != null) {
t.value = color;
t.style.color = color;
} else {
t.focus();
}
return true;
}
// *注:此函数为javascript函数,需要加在<script>中间
// 3、在颜色选择框中添加onclick事件调用getMyColor函数,范例如下:
// <form>...<input size="10" οnclick="getMyColor(this)" name="title_color" type="text" value="blue" οnmοuseοver="this.style.color=this.value;" /> ...</form>
// 4、大功告成,请测试效果。如有异常,需检查:
// select_color.html文件路径是否正常,getMyColor是否处于form表单中
// ########### 版权说明:###########
// 本颜色选择器原始版本网络上盛为流传,此版本为HBcms改良版本
// 最新的HBcms改良版本可以在 http://www.hbcms.com/ 下载
// 本程序原始版权已无可考证,HBcms改良版本版权为GPL
// GPL简单来说即是 代码开源(可免费使用和引用,修改)
// 但不允许将修改后和衍生的代码做为闭源的商业软件发布和销售
//
// $Id: select_color.html,v 1.0 2006/07/26 10:59:30 aashley Exp $
//
******************************************************************/
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');
// initColor() function added by Macro Zeng
// 2006-7-26 http://www.hbcms.com
function initColor() {
if ( location.search != '' && location.search != '?' ) {
var old_color = location.search.substr(1);
if ( /^[0-9A-Fa-f]{6}$/.test(old_color) ) {
SelRGB = '#'+old_color;
RGB.innerText = SelRGB;
EndColor();
} else {
SelColor.value = old_color;
ShowColor.bgColor = SelColor.value;
}
}
}
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>
<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>
<div align="center"><center><table border="0" cellspacing="10" cellpadding="0">
<tr><td rowspan="2" align="center">
选中色彩
<table ID=ShowColor border="1" width="50" height="30" cellspacing="0" cellpadding="0">
<tr><td></td></tr></table>
<!-- // 2006-7-26 added by http://www.hbcms.com -->
<BUTTON ONCLICK="initColor();" style="height:20px;width:50px;font-size:9pt;" οnfοcus="blur();">恢复</BUTTON>
</td>
<td rowspan="2">
<!-- // 2006-7-26 added by http://www.hbcms.com -->
<font style="cursor:hand;" οnclick='alert("选色使用技巧:/n/n1.双击颜色 或 单击颜色,微调亮度,点确定/n/n2.色彩亮度微调:在右边竖立的颜色条中进行/n");' title="点击查看详细帮助">帮助: 选色技巧</font>
<BR>
基色: <SPAN ID=RGB></SPAN><BR>
亮度: <SPAN ID=GRAY>120</SPAN><BR>
代码: <INPUT TYPE=TEXT SIZE=7 ID=SelColor style="height:20px;font-size:9pt;"></td>
<td><BUTTON ID=Ok TYPE=SUBMIT>确定</BUTTON></td></tr>
<tr><td><BUTTON ONCLICK="window.close();">取消</BUTTON></td></tr>
</table></center></div>
</span>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 初始化传递过来的颜色
// 2006-7-26 added by http://www.hbcms.com/
initColor();
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 为了方便大家查看本程序效果
// 以下代码为本页面效果测试用途
// 测试方法:将本页面所有源代码拷贝到一个空白的网页中
// 直接预览,或 保存并打开该网页 即可看到效果,不用再做其它设置
// 最新改良版本可以在这里下载:http://www.hbcms.com
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('<form>...<P><B>仿WINDOW的纯JS超酷颜色选择器HBcms改良版本</B><P>选择颜色:<input size="10" οnclick="getMyColorTest(this)" name="my_color" type="text" value="red" οnmοuseοver="this.style.color=this.value;" /> <P>使用方法请看本网页源代码<P>...</form>');
}
//-->
</SCRIPT>
</BODY>
</HTML>