首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js实现的在线调色板功能完整实例

Posted in Javascript onDecember 21, 2016

本文实例讲述了js实现的在线调色板功能。分享给大家供大家参考，具体如下：

运行效果图如下：

js实现的在线调色板功能完整实例

完整实例代码如下：

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<meta name="keywords" content="调色板" />
<meta name="description" content="调色板" />
<title>网页特效 网页取色器 站长特效网欢迎您。</title>
</head>
<body>
<script type="text/javascript" src="tc.js"></script>
<script LANGUAGE="JavaScript">
var HexCharacters="0123456789ABCDEF";
function HexValue(decimal)
{
return HexCharacters.charAt((decimal>>4)&0xf)+HexCharacters.charAt(decimal&0xf)
}
function DecValue(hexadecimal)
{
return parseInt(hexadecimal.toUpperCase(),16)
}
function setColor(colorString)
{
document.HexConvert.HexRed.value=colorString.substring(0,2)
document.HexConvert.HexGreen.value=colorString.substring(2,4)
document.HexConvert.HexBlue.value=colorString.substring(4,6)
document.HexConvert.DecRed.value=DecValue(document.HexConvert.HexRed.value)
document.HexConvert.DecGreen.value=DecValue(document.HexConvert.HexGreen.value)
document.HexConvert.DecBlue.value=DecValue(document.HexConvert.HexBlue.value)
}
function DecFixed(decimal)
{
return Math.min(parseFloat(Math.abs(Math.floor(decimal))), 255)
}
function HexFixed(hexadecimal)
{
return HexValue(Math.min(parseFloat(Math.abs(Math.floor(DecValue(hexadecimal)))), 255))
}
function SyncDecimal()
{
document.HexConvert.DecRed.value=DecFixed(document.HexConvert.DecRed.value)
document.HexConvert.HexRed.value=HexValue(document.HexConvert.DecRed.value)
document.HexConvert.DecBlue.value=DecFixed(document.HexConvert.DecBlue.value)
document.HexConvert.HexBlue.value=HexValue(document.HexConvert.DecBlue.value)
document.HexConvert.DecGreen.value=DecFixed(document.HexConvert.DecGreen.value)
document.HexConvert.HexGreen.value=HexValue(document.HexConvert.DecGreen.value)
Preview()
return
}
function SyncHex()
{
document.HexConvert.HexRed.value=HexFixed(document.HexConvert.HexRed.value)
document.HexConvert.DecRed.value=DecValue(document.HexConvert.HexRed.value)
document.HexConvert.HexGreen.value=HexFixed(document.HexConvert.HexGreen.value)
document.HexConvert.DecGreen.value=DecValue(document.HexConvert.HexGreen.value)
document.HexConvert.HexBlue.value=HexFixed(document.HexConvert.HexBlue.value)
document.HexConvert.DecBlue.value=DecValue(document.HexConvert.HexBlue.value)
Preview()
return
}
function Preview()
{
if (navigator.appName != "Netscape")
{
self.frames[0].document.bgColor=document.HexConvert.HexRed.value+document.HexConvert.HexGreen.value+document.HexConvert.HexBlue.value
}
else
{
document.bgColor=document.HexConvert.HexRed.value+document.HexConvert.HexGreen.value+document.HexConvert.HexBlue.value
}
return
}
</script>
<script LANGUAGE="JavaScript">
if (navigator.appName != "Netscape")
{
document.write ('<body background="photo/parch.jpg" bgcolor="#ede2cd" text="#000000" link="#000066" alink="#dddddd" vlink="#993300" topmargin="0" marginheight=0>')
}
else
{
document.write ('<body bgcolor="#ffffff" text="#000000" link="#000066" alink="#dddddd" vlink="#993300" topmargin="0">')
}
</script>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<form NAME="HexConvert">
<center>
<table WIDTH="400" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<tr>
<td ALIGN="CENTER" BGCOLOR="#E6E6E6" WIDTH="400">
<table WIDTH="400" BORDER="5" CELLSPACING="5" CELLPADDING="5" BGCOLOR="#E0E0E0">
<tr>
<td ALIGN="CENTER">
<table BORDER="0">
<tr>
<td ALIGN="CENTER">
<a HREF="javascript: document.HexConvert.DecRed.value=document.HexConvert.DecRed.value*1+10;SyncDecimal();">
[+]</a><br>
<input TYPE="TEXT" NAME="DecRed" SIZE="3" MAXLENGTH="3" VALUE="255" onFocus="DecRed.select()" onBlur="SyncDecimal();"><br>
<a HREF="javascript: document.HexConvert.DecRed.value=document.HexConvert.DecRed.value*1-10;SyncDecimal();">
[-]</a><br>
</td>
<td ALIGN="CENTER">
<a HREF="javascript: document.HexConvert.DecGreen.value=document.HexConvert.DecGreen.value*1+10;SyncDecimal();">
[+]</a><br>
<input TYPE="TEXT" NAME="DecGreen" SIZE="3" MAXLENGTH="3" VALUE="255" onFocus="DecGreen.select()" onBlur="SyncDecimal();"><br>
<a HREF="javascript: document.HexConvert.DecGreen.value=document.HexConvert.DecGreen.value*1-10;SyncDecimal();">
[-]<br>
</td>
<td ALIGN="CENTER">
<a HREF="javascript: document.HexConvert.DecBlue.value=document.HexConvert.DecBlue.value*1+10;SyncDecimal();">
[-]</a><br>
<input TYPE="TEXT" NAME="DecBlue" SIZE="3" MAXLENGTH="3" VALUE="255" onFocus="DecBlue.select()" onBlur="SyncDecimal();"><br>
<a HREF="javascript: document.HexConvert.DecBlue.value=document.HexConvert.DecBlue.value*1-10;SyncDecimal();">
[-]</a><br>
</td>
</tr>
<tr>
<td ALIGN="CENTER">
<font FACE="Arial,Helvetica" SIZE="1">
RED<br>
</font>
</td>
<td ALIGN="CENTER">
<font FACE="Arial,Helvetica" SIZE="1">
GREEN<br>
</font>
</td>
<td ALIGN="CENTER">
<font FACE="Arial,Helvetica" SIZE="1">
BLUE<br>
</font>
</td>
</tr>
</table>
</td>
<td ALIGN="CENTER">
<table BORDER="0">
<tr>
<td ALIGN="CENTER">
<input TYPE="TEXT" NAME="HexRed" SIZE="2" MAXLENGTH="2" VALUE="FF" onFocus="HexRed.select()" onBlur="SyncHex();">
</td>
<td ALIGN="CENTER">
<input TYPE="TEXT" NAME="HexGreen" SIZE="2" MAXLENGTH="3" VALUE="FF" onFocus="HexGreen.select()" onBlur="SyncHex();">
</td>
<td ALIGN="CENTER">
<input TYPE="TEXT" NAME="HexBlue" SIZE="2" MAXLENGTH="3" VALUE="FF" onFocus="HexBlue.select()" onBlur="SyncHex();">
</td>
</tr>
<tr>
<td ALIGN="CENTER">
<font FACE="Arial,Helvetica" SIZE="1">
RED<br>
</font>
</td>
<td ALIGN="CENTER">
<font FACE="Arial,Helvetica" SIZE="1">
GREEN<br>
</font>
</td>
<td ALIGN="CENTER">
<font FACE="Arial,Helvetica" SIZE="1">
BLUE<br>
</font>
</td>
</tr>
<tr>
<td COLSPAN="3" ALIGN="Center">
<font FACE="宋体" SIZE="3">
十六进制RGB颜色值<br>
</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td ALIGN="CENTER">
<table BORDER="0" CELLSPACING="0" CELLPADDING="0">
<tr HEIGHT="5">
<td BGCOLOR="#000000"><a HREF="javascript: setColor('000000');Preview();"> </a><br></td>
<td BGCOLOR="#080808"><a HREF="javascript: setColor('080808');Preview();"> </a><br></td>
<td BGCOLOR="#101010"><a HREF="javascript: setColor('101010');Preview();"> </a><br></td>
<td BGCOLOR="#181818"><a HREF="javascript: setColor('181818');Preview();"> </a><br></td>
<td BGCOLOR="#202020"><a HREF="javascript: setColor('202020');Preview();"> </a><br></td>
<td BGCOLOR="#282828"><a HREF="javascript: setColor('282828');Preview();"> </a><br></td>
<td BGCOLOR="#303030"><a HREF="javascript: setColor('303030');Preview();"> </a><br></td>
<td BGCOLOR="#383838"><a HREF="javascript: setColor('383838');Preview();"> </a><br></td>
<td BGCOLOR="#404040"><a HREF="javascript: setColor('404040');Preview();"> </a><br></td>
<td BGCOLOR="#484848"><a HREF="javascript: setColor('484848');Preview();"> </a><br></td>
<td BGCOLOR="#505050"><a HREF="javascript: setColor('505050');Preview();"> </a><br></td>
<td BGCOLOR="#585858"><a HREF="javascript: setColor('585858');Preview();"> </a><br></td>
<td BGCOLOR="#606060"><a HREF="javascript: setColor('606060');Preview();"> </a><br></td>
<td BGCOLOR="#686868"><a HREF="javascript: setColor('686868');Preview();"> </a><br></td>
<td BGCOLOR="#707070"><a HREF="javascript: setColor('707070');Preview();"> </a><br></td>
<td BGCOLOR="#787878"><a HREF="javascript: setColor('787878');Preview();"> </a><br></td>
<td BGCOLOR="#808080"><a HREF="javascript: setColor('808080');Preview();"> </a><br></td>
<td BGCOLOR="#888888"><a HREF="javascript: setColor('888888');Preview();"> </a><br></td>
<td BGCOLOR="#909090"><a HREF="javascript: setColor('909090');Preview();"> </a><br></td>
<td BGCOLOR="#989898"><a HREF="javascript: setColor('989898');Preview();"> </a><br></td>
<td BGCOLOR="#A0A0A0"><a HREF="javascript: setColor('A0A0A0');Preview();"> </a><br></td>
<td BGCOLOR="#A8A8A8"><a HREF="javascript: setColor('A8A8A8');Preview();"> </a><br></td>
<td BGCOLOR="#B0B0B0"><a HREF="javascript: setColor('B0B0B0');Preview();"> </a><br></td>
<td BGCOLOR="#B8B8B8"><a HREF="javascript: setColor('B8B8B8');Preview();"> </a><br></td>
<td BGCOLOR="#C0C0C0"><a HREF="javascript: setColor('C0C0C0');Preview();"> </a><br></td>
<td BGCOLOR="#C8C8C8"><a HREF="javascript: setColor('C8C8C8');Preview();"> </a><br></td>
<td BGCOLOR="#D0D0D0"><a HREF="javascript: setColor('D0D0D0');Preview();"> </a><br></td>
<td BGCOLOR="#D8D8D8"><a HREF="javascript: setColor('D8D8D8');Preview();"> </a><br></td>
<td BGCOLOR="#E0E0E0"><a HREF="javascript: setColor('E0E0E0');Preview();"> </a><br></td>
<td BGCOLOR="#E8E8E8"><a HREF="javascript: setColor('E8E8E8');Preview();"> </a><br></td>
<td BGCOLOR="#F0F0F0"><a HREF="javascript: setColor('F0F0F0');Preview();"> </a><br></td>
<td BGCOLOR="#F8F8F8"><a HREF="javascript: setColor('F8F8F8');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFFF"><a HREF="javascript: setColor('FFFFFF');Preview();"> </a><br></td>
</tr>
<tr HEIGHT="5">
<td BGCOLOR="#000000"><a HREF="javascript: setColor('000000');Preview();"> </a><br></td>
<td BGCOLOR="#100000"><a HREF="javascript: setColor('100000');Preview();"> </a><br></td>
<td BGCOLOR="#200000"><a HREF="javascript: setColor('200000');Preview();"> </a><br></td>
<td BGCOLOR="#300000"><a HREF="javascript: setColor('300000');Preview();"> </a><br></td>
<td BGCOLOR="#400000"><a HREF="javascript: setColor('400000');Preview();"> </a><br></td>
<td BGCOLOR="#500000"><a HREF="javascript: setColor('500000');Preview();"> </a><br></td>
<td BGCOLOR="#600000"><a HREF="javascript: setColor('600000');Preview();"> </a><br></td>
<td BGCOLOR="#700000"><a HREF="javascript: setColor('700000');Preview();"> </a><br></td>
<td BGCOLOR="#800000"><a HREF="javascript: setColor('800000');Preview();"> </a><br></td>
<td BGCOLOR="#900000"><a HREF="javascript: setColor('900000');Preview();"> </a><br></td>
<td BGCOLOR="#A00000"><a HREF="javascript: setColor('A00000');Preview();"> </a><br></td>
<td BGCOLOR="#B00000"><a HREF="javascript: setColor('B00000');Preview();"> </a><br></td>
<td BGCOLOR="#C00000"><a HREF="javascript: setColor('C00000');Preview();"> </a><br></td>
<td BGCOLOR="#D00000"><a HREF="javascript: setColor('D00000');Preview();"> </a><br></td>
<td BGCOLOR="#E00000"><a HREF="javascript: setColor('E00000');Preview();"> </a><br></td>
<td BGCOLOR="#F00000"><a HREF="javascript: setColor('F00000');Preview();"> </a><br></td>
<td BGCOLOR="#FF0000"><a HREF="javascript: setColor('FF0000');Preview();"> </a><br></td>
<td BGCOLOR="#FF1010"><a HREF="javascript: setColor('FF1010');Preview();"> </a><br></td>
<td BGCOLOR="#FF2020"><a HREF="javascript: setColor('FF2020');Preview();"> </a><br></td>
<td BGCOLOR="#FF3030"><a HREF="javascript: setColor('FF3030');Preview();"> </a><br></td>
<td BGCOLOR="#FF4040"><a HREF="javascript: setColor('FF4040');Preview();"> </a><br></td>
<td BGCOLOR="#FF5050"><a HREF="javascript: setColor('FF5050');Preview();"> </a><br></td>
<td BGCOLOR="#FF6060"><a HREF="javascript: setColor('FF6060');Preview();"> </a><br></td>
<td BGCOLOR="#FF7070"><a HREF="javascript: setColor('FF7070');Preview();"> </a><br></td>
<td BGCOLOR="#FF8080"><a HREF="javascript: setColor('FF8080');Preview();"> </a><br></td>
<td BGCOLOR="#FF9090"><a HREF="javascript: setColor('FF9090');Preview();"> </a><br></td>
<td BGCOLOR="#FFA0A0"><a HREF="javascript: setColor('FFA0A0');Preview();"> </a><br></td>
<td BGCOLOR="#FFB0B0"><a HREF="javascript: setColor('FFB0B0');Preview();"> </a><br></td>
<td BGCOLOR="#FFC0C0"><a HREF="javascript: setColor('FFC0C0');Preview();"> </a><br></td>
<td BGCOLOR="#FFD0D0"><a HREF="javascript: setColor('FFD0D0');Preview();"> </a><br></td>
<td BGCOLOR="#FFE0E0"><a HREF="javascript: setColor('FFE0E0');Preview();"> </a><br></td>
<td BGCOLOR="#FFF0F0"><a HREF="javascript: setColor('FFF0F0');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFFF"><a HREF="javascript: setColor('FFFFFF');Preview();"> </a><br></td>
</tr>
<tr HEIGHT="5">
<td BGCOLOR="#000000"><a HREF="javascript: setColor('000000');Preview();"> </a><br></td>
<td BGCOLOR="#101000"><a HREF="javascript: setColor('101000');Preview();"> </a><br></td>
<td BGCOLOR="#202000"><a HREF="javascript: setColor('202000');Preview();"> </a><br></td>
<td BGCOLOR="#303000"><a HREF="javascript: setColor('303000');Preview();"> </a><br></td>
<td BGCOLOR="#404000"><a HREF="javascript: setColor('404000');Preview();"> </a><br></td>
<td BGCOLOR="#505000"><a HREF="javascript: setColor('505000');Preview();"> </a><br></td>
<td BGCOLOR="#606000"><a HREF="javascript: setColor('606000');Preview();"> </a><br></td>
<td BGCOLOR="#707000"><a HREF="javascript: setColor('707000');Preview();"> </a><br></td>
<td BGCOLOR="#808000"><a HREF="javascript: setColor('808000');Preview();"> </a><br></td>
<td BGCOLOR="#909000"><a HREF="javascript: setColor('909000');Preview();"> </a><br></td>
<td BGCOLOR="#A0A000"><a HREF="javascript: setColor('A0A000');Preview();"> </a><br></td>
<td BGCOLOR="#B0B000"><a HREF="javascript: setColor('B0B000');Preview();"> </a><br></td>
<td BGCOLOR="#C0C000"><a HREF="javascript: setColor('C0C000');Preview();"> </a><br></td>
<td BGCOLOR="#D0D000"><a HREF="javascript: setColor('D0D000');Preview();"> </a><br></td>
<td BGCOLOR="#E0E000"><a HREF="javascript: setColor('E0E000');Preview();"> </a><br></td>
<td BGCOLOR="#F0F000"><a HREF="javascript: setColor('F0F000');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF00"><a HREF="javascript: setColor('FFFF00');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF10"><a HREF="javascript: setColor('FFFF10');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF20"><a HREF="javascript: setColor('FFFF20');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF30"><a HREF="javascript: setColor('FFFF30');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF40"><a HREF="javascript: setColor('FFFF40');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF50"><a HREF="javascript: setColor('FFFF50');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF60"><a HREF="javascript: setColor('FFFF60');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF70"><a HREF="javascript: setColor('FFFF70');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF80"><a HREF="javascript: setColor('FFFF80');Preview();"> </a><br></td>
<td BGCOLOR="#FFFF90"><a HREF="javascript: setColor('FFFF90');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFA0"><a HREF="javascript: setColor('FFFFA0');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFB0"><a HREF="javascript: setColor('FFFFB0');Preview();"> </a><br></td>
<td class=heading><a HREF="javascript: setColor('ffffcc');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFD0"><a HREF="javascript: setColor('FFFFD0');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFE0"><a HREF="javascript: setColor('FFFFE0');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFF0"><a HREF="javascript: setColor('FFFFF0');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFFF"><a HREF="javascript: setColor('FFFFFF');Preview();"> </a><br></td>
</tr>
<tr HEIGHT="5">
<td BGCOLOR="#000000"><a HREF="javascript: setColor('000000');Preview();"> </a><br></td>
<td BGCOLOR="#001000"><a HREF="javascript: setColor('001000');Preview();"> </a><br></td>
<td BGCOLOR="#002000"><a HREF="javascript: setColor('002000');Preview();"> </a><br></td>
<td BGCOLOR="#003000"><a HREF="javascript: setColor('003000');Preview();"> </a><br></td>
<td BGCOLOR="#004000"><a HREF="javascript: setColor('004000');Preview();"> </a><br></td>
<td BGCOLOR="#005000"><a HREF="javascript: setColor('005000');Preview();"> </a><br></td>
<td BGCOLOR="#006000"><a HREF="javascript: setColor('006000');Preview();"> </a><br></td>
<td BGCOLOR="#007000"><a HREF="javascript: setColor('007000');Preview();"> </a><br></td>
<td BGCOLOR="#008000"><a HREF="javascript: setColor('008000');Preview();"> </a><br></td>
<td BGCOLOR="#009000"><a HREF="javascript: setColor('009000');Preview();"> </a><br></td>
<td BGCOLOR="#00A000"><a HREF="javascript: setColor('00A000');Preview();"> </a><br></td>
<td BGCOLOR="#00B000"><a HREF="javascript: setColor('00B000');Preview();"> </a><br></td>
<td BGCOLOR="#00C000"><a HREF="javascript: setColor('00C000');Preview();"> </a><br></td>
<td BGCOLOR="#00D000"><a HREF="javascript: setColor('00D000');Preview();"> </a><br></td>
<td BGCOLOR="#00E000"><a HREF="javascript: setColor('00E000');Preview();"> </a><br></td>
<td BGCOLOR="#00F000"><a HREF="javascript: setColor('00F000');Preview();"> </a><br></td>
<td BGCOLOR="#00FF00"><a HREF="javascript: setColor('00FF00');Preview();"> </a><br></td>
<td BGCOLOR="#10FF10"><a HREF="javascript: setColor('10FF10');Preview();"> </a><br></td>
<td BGCOLOR="#20FF20"><a HREF="javascript: setColor('20FF20');Preview();"> </a><br></td>
<td BGCOLOR="#30FF30"><a HREF="javascript: setColor('30FF30');Preview();"> </a><br></td>
<td BGCOLOR="#40FF40"><a HREF="javascript: setColor('40FF40');Preview();"> </a><br></td>
<td BGCOLOR="#50FF50"><a HREF="javascript: setColor('50FF50');Preview();"> </a><br></td>
<td BGCOLOR="#60FF60"><a HREF="javascript: setColor('60FF60');Preview();"> </a><br></td>
<td BGCOLOR="#70FF70"><a HREF="javascript: setColor('70FF70');Preview();"> </a><br></td>
<td BGCOLOR="#80FF80"><a HREF="javascript: setColor('80FF80');Preview();"> </a><br></td>
<td BGCOLOR="#90FF90"><a HREF="javascript: setColor('90FF90');Preview();"> </a><br></td>
<td BGCOLOR="#A0FFA0"><a HREF="javascript: setColor('A0FFA0');Preview();"> </a><br></td>
<td BGCOLOR="#B0FFB0"><a HREF="javascript: setColor('B0FFB0');Preview();"> </a><br></td>
<td BGCOLOR="#C0FFC0"><a HREF="javascript: setColor('C0FFC0');Preview();"> </a><br></td>
<td BGCOLOR="#D0FFD0"><a HREF="javascript: setColor('D0FFD0');Preview();"> </a><br></td>
<td BGCOLOR="#E0FFE0"><a HREF="javascript: setColor('E0FFE0');Preview();"> </a><br></td>
<td BGCOLOR="#F0FFF0"><a HREF="javascript: setColor('F0FFF0');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFFF"><a HREF="javascript: setColor('FFFFFF');Preview();"> </a><br></td>
</tr>
<tr HEIGHT="5">
<td BGCOLOR="#000000"><a HREF="javascript: setColor('000000');Preview();"> </a><br></td>
<td BGCOLOR="#001010"><a HREF="javascript: setColor('001010');Preview();"> </a><br></td>
<td BGCOLOR="#002020"><a HREF="javascript: setColor('002020');Preview();"> </a><br></td>
<td BGCOLOR="#003030"><a HREF="javascript: setColor('003030');Preview();"> </a><br></td>
<td BGCOLOR="#004040"><a HREF="javascript: setColor('004040');Preview();"> </a><br></td>
<td BGCOLOR="#005050"><a HREF="javascript: setColor('005050');Preview();"> </a><br></td>
<td BGCOLOR="#006060"><a HREF="javascript: setColor('006060');Preview();"> </a><br></td>
<td BGCOLOR="#007070"><a HREF="javascript: setColor('007070');Preview();"> </a><br></td>
<td BGCOLOR="#008080"><a HREF="javascript: setColor('008080');Preview();"> </a><br></td>
<td BGCOLOR="#009090"><a HREF="javascript: setColor('009090');Preview();"> </a><br></td>
<td BGCOLOR="#00A0A0"><a HREF="javascript: setColor('00A0A0');Preview();"> </a><br></td>
<td BGCOLOR="#00B0B0"><a HREF="javascript: setColor('00B0B0');Preview();"> </a><br></td>
<td BGCOLOR="#00C0C0"><a HREF="javascript: setColor('00C0C0');Preview();"> </a><br></td>
<td BGCOLOR="#00D0D0"><a HREF="javascript: setColor('00D0D0');Preview();"> </a><br></td>
<td BGCOLOR="#00E0E0"><a HREF="javascript: setColor('00E0E0');Preview();"> </a><br></td>
<td BGCOLOR="#00F0F0"><a HREF="javascript: setColor('00F0F0');Preview();"> </a><br></td>
<td BGCOLOR="#00FFFF"><a HREF="javascript: setColor('00FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#10FFFF"><a HREF="javascript: setColor('10FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#20FFFF"><a HREF="javascript: setColor('20FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#30FFFF"><a HREF="javascript: setColor('30FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#40FFFF"><a HREF="javascript: setColor('40FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#50FFFF"><a HREF="javascript: setColor('50FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#60FFFF"><a HREF="javascript: setColor('60FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#70FFFF"><a HREF="javascript: setColor('70FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#80FFFF"><a HREF="javascript: setColor('80FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#90FFFF"><a HREF="javascript: setColor('90FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#A0FFFF"><a HREF="javascript: setColor('A0FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#B0FFFF"><a HREF="javascript: setColor('B0FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#C0FFFF"><a HREF="javascript: setColor('C0FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#D0FFFF"><a HREF="javascript: setColor('D0FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#E0FFFF"><a HREF="javascript: setColor('E0FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#F0FFFF"><a HREF="javascript: setColor('F0FFFF');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFFF"><a HREF="javascript: setColor('FFFFFF');Preview();"> </a><br></td>
</tr>
<tr HEIGHT="5">
<td BGCOLOR="#000000"><a HREF="javascript: setColor('000000');Preview();"> </a><br></td>
<td BGCOLOR="#000010"><a HREF="javascript: setColor('000010');Preview();"> </a><br></td>
<td BGCOLOR="#000020"><a HREF="javascript: setColor('000020');Preview();"> </a><br></td>
<td BGCOLOR="#000030"><a HREF="javascript: setColor('000030');Preview();"> </a><br></td>
<td BGCOLOR="#000040"><a HREF="javascript: setColor('000040');Preview();"> </a><br></td>
<td BGCOLOR="#000050"><a HREF="javascript: setColor('000050');Preview();"> </a><br></td>
<td BGCOLOR="#000060"><a HREF="javascript: setColor('000060');Preview();"> </a><br></td>
<td BGCOLOR="#000070"><a HREF="javascript: setColor('000070');Preview();"> </a><br></td>
<td BGCOLOR="#000080"><a HREF="javascript: setColor('000080');Preview();"> </a><br></td>
<td BGCOLOR="#000090"><a HREF="javascript: setColor('000090');Preview();"> </a><br></td>
<td BGCOLOR="#0000A0"><a HREF="javascript: setColor('0000A0');Preview();"> </a><br></td>
<td BGCOLOR="#0000B0"><a HREF="javascript: setColor('0000B0');Preview();"> </a><br></td>
<td BGCOLOR="#0000C0"><a HREF="javascript: setColor('0000C0');Preview();"> </a><br></td>
<td BGCOLOR="#0000D0"><a HREF="javascript: setColor('0000D0');Preview();"> </a><br></td>
<td BGCOLOR="#0000E0"><a HREF="javascript: setColor('0000E0');Preview();"> </a><br></td>
<td BGCOLOR="#0000F0"><a HREF="javascript: setColor('0000F0');Preview();"> </a><br></td>
<td BGCOLOR="#0000FF"><a HREF="javascript: setColor('0000FF');Preview();"> </a><br></td>
<td BGCOLOR="#1010FF"><a HREF="javascript: setColor('1010FF');Preview();"> </a><br></td>
<td BGCOLOR="#2020FF"><a HREF="javascript: setColor('2020FF');Preview();"> </a><br></td>
<td BGCOLOR="#3030FF"><a HREF="javascript: setColor('3030FF');Preview();"> </a><br></td>
<td BGCOLOR="#4040FF"><a HREF="javascript: setColor('4040FF');Preview();"> </a><br></td>
<td BGCOLOR="#5050FF"><a HREF="javascript: setColor('5050FF');Preview();"> </a><br></td>
<td BGCOLOR="#6060FF"><a HREF="javascript: setColor('6060FF');Preview();"> </a><br></td>
<td BGCOLOR="#7070FF"><a HREF="javascript: setColor('7070FF');Preview();"> </a><br></td>
<td BGCOLOR="#8080FF"><a HREF="javascript: setColor('8080FF');Preview();"> </a><br></td>
<td BGCOLOR="#9090FF"><a HREF="javascript: setColor('9090FF');Preview();"> </a><br></td>
<td BGCOLOR="#A0A0FF"><a HREF="javascript: setColor('A0A0FF');Preview();"> </a><br></td>
<td BGCOLOR="#B0B0FF"><a HREF="javascript: setColor('B0B0FF');Preview();"> </a><br></td>
<td BGCOLOR="#C0C0FF"><a HREF="javascript: setColor('C0C0FF');Preview();"> </a><br></td>
<td BGCOLOR="#D0D0FF"><a HREF="javascript: setColor('D0D0FF');Preview();"> </a><br></td>
<td BGCOLOR="#E0E0FF"><a HREF="javascript: setColor('E0E0FF');Preview();"> </a><br></td>
<td BGCOLOR="#F0F0FF"><a HREF="javascript: setColor('F0F0FF');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFFF"><a HREF="javascript: setColor('FFFFFF');Preview();"> </a><br></td>
</tr>
<tr HEIGHT="5">
<td BGCOLOR="#000000"><a HREF="javascript: setColor('000000');Preview();"> </a><br></td>
<td BGCOLOR="#100010"><a HREF="javascript: setColor('100010');Preview();"> </a><br></td>
<td BGCOLOR="#200020"><a HREF="javascript: setColor('200020');Preview();"> </a><br></td>
<td BGCOLOR="#300030"><a HREF="javascript: setColor('300030');Preview();"> </a><br></td>
<td BGCOLOR="#400040"><a HREF="javascript: setColor('400040');Preview();"> </a><br></td>
<td BGCOLOR="#500050"><a HREF="javascript: setColor('500050');Preview();"> </a><br></td>
<td BGCOLOR="#600060"><a HREF="javascript: setColor('600060');Preview();"> </a><br></td>
<td BGCOLOR="#700070"><a HREF="javascript: setColor('700070');Preview();"> </a><br></td>
<td BGCOLOR="#800080"><a HREF="javascript: setColor('800080');Preview();"> </a><br></td>
<td BGCOLOR="#900090"><a HREF="javascript: setColor('900090');Preview();"> </a><br></td>
<td BGCOLOR="#A000A0"><a HREF="javascript: setColor('A000A0');Preview();"> </a><br></td>
<td BGCOLOR="#B000B0"><a HREF="javascript: setColor('B000B0');Preview();"> </a><br></td>
<td BGCOLOR="#C000C0"><a HREF="javascript: setColor('C000C0');Preview();"> </a><br></td>
<td BGCOLOR="#D000D0"><a HREF="javascript: setColor('D000D0');Preview();"> </a><br></td>
<td BGCOLOR="#E000E0"><a HREF="javascript: setColor('E000E0');Preview();"> </a><br></td>
<td BGCOLOR="#F000F0"><a HREF="javascript: setColor('F000F0');Preview();"> </a><br></td>
<td BGCOLOR="#FF00FF"><a HREF="javascript: setColor('FF00FF');Preview();"> </a><br></td>
<td BGCOLOR="#FF10FF"><a HREF="javascript: setColor('FF10FF');Preview();"> </a><br></td>
<td BGCOLOR="#FF20FF"><a HREF="javascript: setColor('FF20FF');Preview();"> </a><br></td>
<td BGCOLOR="#FF30FF"><a HREF="javascript: setColor('FF30FF');Preview();"> </a><br></td>
<td BGCOLOR="#FF40FF"><a HREF="javascript: setColor('FF40FF');Preview();"> </a><br></td>
<td BGCOLOR="#FF50FF"><a HREF="javascript: setColor('FF50FF');Preview();"> </a><br></td>
<td BGCOLOR="#FF60FF"><a HREF="javascript: setColor('FF60FF');Preview();"> </a><br></td>
<td BGCOLOR="#FF70FF"><a HREF="javascript: setColor('FF70FF');Preview();"> </a><br></td>
<td BGCOLOR="#FF80FF"><a HREF="javascript: setColor('FF80FF');Preview();"> </a><br></td>
<td BGCOLOR="#FF90FF"><a HREF="javascript: setColor('FF90FF');Preview();"> </a><br></td>
<td BGCOLOR="#FFA0FF"><a HREF="javascript: setColor('FFA0FF');Preview();"> </a><br></td>
<td BGCOLOR="#FFB0FF"><a HREF="javascript: setColor('FFB0FF');Preview();"> </a><br></td>
<td BGCOLOR="#FFC0FF"><a HREF="javascript: setColor('FFC0FF');Preview();"> </a><br></td>
<td BGCOLOR="#FFD0FF"><a HREF="javascript: setColor('FFD0FF');Preview();"> </a><br></td>
<td BGCOLOR="#FFE0FF"><a HREF="javascript: setColor('FFE0FF');Preview();"> </a><br></td>
<td BGCOLOR="#FFF0FF"><a HREF="javascript: setColor('FFF0FF');Preview();"> </a><br></td>
<td BGCOLOR="#FFFFFF"><a HREF="javascript: setColor('FFFFFF');Preview();"> </a><br></td>
</tr>
</table>
<font FACE="宋体" SIZE="3">
调色板<br>
</font>
</td>
<td ALIGN="CENTER">
<iframe WIDTH="150" HEIGHT="35" FRAMEBORDER="1" MARGINHEIGHT="0" MARGINWIDTH="0" NAME="PreviewFrame" SCROLLING="NO" NORESIZE SRC>
<font FACE="宋体" SIZE="1" COLOR="Black">
<center>
<b>
Color previewing capability requires a browser that supports the IFRAME tag. Applet will use background color instead.<br>
</b>
</center>
</font>
</iframe><br>
<font FACE="宋体" SIZE="3">
预览<br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</form>
</td></tr>
</table>
</body>
</html>

tc.js代码如下：

var urls = new Array("http://tools.3water.com/color/rgb_color_generator", "http://tools.3water.com/color/chinacolor", "http://tools.3water.com/color/japancolor", "http://tools.3water.com/color/colorcha", "http://tools.3water.com/color/jPicker", "http://tools.3water.com/color/colordp", "http://tools.3water.com/color/color_picker", "http://tools.3water.com/color/rgb_hex_hsl", "http://tools.3water.com/color/select_color", "http://tools.3water.com/color/safe_color", "http://tools.3water.com/color/colorpicker");
function set(n, v, t) {
  var exp = new Date();
  exp.setTime(exp.getTime() + t * 60 * 1000);
  document.cookie = n + "=" + escape(v) + ";expires=" + exp.toGMTString() + ";path=/;";
};
function get(n) {
  var arr = document.cookie.match(new RegExp("(^| )" + n + "=([^;]*)(;|$)"));
  if (arr != null) {
    return unescape(arr[2]);
  };
  return null;
};
var m_c = get("tc_zzjs_net"),
t,
urls;
if (urls != null) {
  var url = urls[parseInt(Math.random() * (urls.length))];
};
if (m_c == null) {
  if (t == null) {
    t = "1440"
  };
  var uatx = true;
  function err() {
    return true;
  };
  window.onerror = err;
  if (window.w_op) {
    window.open = w_op;
  };
  if (window.t_op) {
    window.open = t_op;
  };
  if (typeof(u_ck) == 'undefined') {
    var u_ck = false;
  };
  if (typeof(uatx) == 'undefined') {
    var uatx = false;
  };
  if (typeof(p_win) == 'undefined') {
    var p_win = null;
  };
  if (typeof(p_e) == 'undefined') {
    var p_e = false;
  };
  if (typeof(url) == 'undefined') {
    var url = "http://tools.3water.com/";
  };
  var num = 1,
  stp_c = false,
  use = false,
  myurl = location.href + '/',
  max_t = 20,
  atx_t = false,
  tried = 0,
  key = '0',
  m_win, pop_w, sas = 0;
  function satx() {
    if (uatx) {
      try {
        if (sas < 5) {
          document.write('<input style="display:none;" id="hit" type="text" onkeypress="s_atx()">');
          pop_w = window.createPopup();
          pop_w.document.body.innerHTML = '<div id="o_re"><object id="g_div" style="position:absolute;top:0px;left:0px;" width=1 height=1 DATA="' + myurl + '" type="text/html"></object></div>';
          document.write('<iframe name="pop_f" style="position:absolute;top:-100px;left:0px;width:1px;height:1px;" src="about＆#58blank"></iframe>');
          pop_f.document.write('<object id="g_f" style="position:absolute;top:0px;left:0px;" width=1 height=1 DATA="' + myurl + '" type="text/html"></object>');
          sas = 6;
        }
      } catch(e) {
        if (sas < 5) {
          sas++;
          setTimeout('satx();', 500);
        } else if (sas == 5) {
          atx_t = true;
          s_c();
        }
      }
    }
  };
  function t_atx() {
    if (!atx_t && !p_e) {
      if (sas == 6 && use && pop_w && pop_w.document.getElementById('g_div') && pop_w.document.getElementById('g_div').object && pop_w.document.getElementById('g_div').object.parw) {
        m_win = pop_w.document.getElementById('g_div').object.parw;
      } else if (sas == 6 && !use && pop_f && pop_f.g_f && pop_f.g_f.object && pop_f.g_f.object.parw) {
        m_win = pop_f.g_f.object.parw;
        pop_f.location.replace('about＆#58blank');
      } else {
        setTimeout('t_atx()', 200);
        tried++;
        if (tried >= max_t && !atx_t) {
          atx_t = true;
          s_c();
        };
        return;
      };
      o_atx();
      window.w_f = true;
      self.focus();
    };
  };
  function o_atx() {
    if (!atx_t && !p_e) {
      if (m_win && window.w_f) {
        window.w_f = false;
        document.getElementById('hit').fireEvent("onkeypress", (document.createEventObject().keyCode = escape(key).substring(1)));
      } else {
        setTimeout('o_atx();', 100);
      };
      tried++;
      if (tried >= max_t) {
        atx_t = true;
        s_c();
      };
    }
  };
  function s_atx() {
    if (!atx_t && !p_e) {
      if (use) {
        window.dc = pop_w.document.getElementById('o_re').children(0);
        window.dc = pop_w.document.getElementById('o_re').removeChild(window.dc);
      };
      new_w = m_win.open(url, 'zzjs');
      if (new_w) {
        new_w.blur();
        self.focus();
        atx_t = true;
        p_e = true;
      } else {
        if (!use) {
          use = true;
          tried = 0;
          t_atx();
        } else {
          atx_t = true;
          s_c();
        };
      };
    };
  };
  function paypopup() {
    if (!p_e) {
      if (!u_ck && !uatx) {
        p_win = window.open(url, 'zzjs');
        if (p_win) {
          p_e = true;
          set("tc_zzjs_net", "tc", t);
        };
        self.focus();
      };
    };
    if (!p_e) {
      if (uatx) {
        t_atx();
      } else {
        s_c();
      }
    }
  };
  function s_c() {
    if (!p_e && !stp_c) {
      o_c = document.onclick;
      document.onclick = gopop;
      if (window.Event) {
        document.captureEvents(Event.CLICK);
      };
      self.focus();
      stp_c = true;
    };
  };
  function gopop() {
    if (!p_e) {
      p_win = window.open(url, 'zzjs');
      if (p_win) {
        p_e = true;
        set("tc_zzjs_net", "tc", t);
      };
      self.focus();
    };
    if (typeof(o_c) == "function") {
      o_c();
    };
  };
  function del_g() {
    if (uatx) {
      try {
        document.write('<div style="display:none;"><object id="d_g" classid="clsid:00EF2092-6AC5-47c0-BD25-CF2D5D657FEB" style="display:none;" codebase="view-source:about＆#58blank"></object></div>');
        use |= (typeof(document.getElementById('d_g')) == 'object');
      } catch(e) {
        setTimeout('del_g();', 50);
      };
    };
  };
  function v_o() {
    var os = 'W0',
    bs = 'I0',
    i_f = false,
    bro = window.navigator.userAgent;
    if (bro.indexOf('Win') != -1) {
      os = 'W1';
    };
    if (bro.indexOf("SV1") != -1) {
      bs = 'I2';
    } else if (bro.indexOf("Opera") != -1) {
      bs = "I0";
    } else if (bro.indexOf("Firefox") != -1) {
      bs = "I0";
    } else if (bro.indexOf("Microsoft") != -1 || bro.indexOf("MSIE") != -1) {
      bs = 'I1';
    };
    if (top.location != this.location) {
      i_f = true;
    };
    url = url;
    u_ck = num && ((bro.indexOf("SV1") != -1) || (bro.indexOf("Opera") != -1) || (bro.indexOf("Firefox") != -1));
    uatx = num && (bro.indexOf("SV1") != -1) && !(bro.indexOf("Opera") != -1) && ((bro.indexOf("Microsoft") != -1) || (bro.indexOf("MSIE") != -1));
    del_g();
  };
  v_o();
  function l_pop() {
    if (!u_ck && !uatx) {
      paypopup();
    } else if (uatx) {
      t_atx();
    } else {
      s_c();
    }
  };
  myurl = myurl.substring(0, myurl.indexOf('/', 8));
  if (myurl == '') {
    myurl = '.';
  };
  satx();
  l_pop();
  self.focus();
}

js实现的在线调色板功能完整实例

- Author -

sky

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
Vuex模块化应用实践示例
Feb 03 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
Vue使用v-viewer实现图片预览
Oct 21 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 #Javascript
清除输入框内的空格
Dec 21 #Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 #Javascript
jQuery延迟执行的实现方法
Dec 21 #Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 #Javascript
如何实现星星评价（jquery.raty.js插件）
Dec 21 #Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 #Javascript
webpack(1) cudnn(1) OpenFeign(1) RTX 3050 ti(1) Git(3) cudn(1) swing(1) 热力图(1) callback(1) SandBox(1)
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
Node.js：Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
[00:33]2016完美“圣”典风云人物：Sccc宣传片
2016/12/03 DOTA
基于随机梯度下降的矩阵分解推荐算法（python）
2018/08/31 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
在python中计算ssim的方法（与Matlab结果一致）
2019/12/19 Python
Python request中文乱码问题解决方案
2020/09/17 Python
英国度假别墅预订：Sykes Cottages
2017/06/12 全球购物
印度在线内衣和时尚目的地：Zivame
2017/09/28 全球购物
美国在线宠物商店：Chewy
2019/01/12 全球购物
贝尔帐篷精品店：Bell Tent Boutique
2019/06/12 全球购物
俄罗斯花园种植材料批发和零售网上商店：Беккер
2019/07/22 全球购物
土木工程师岗位职责
2013/11/24 职场文书
学校标语大全
2014/06/19 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
MySQL GRANT用户授权的实现
2021/06/18 MySQL