本文实例讲述了 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.jb51.net/color/rgb_color_generator", "http://tools.jb51.net/color/chinacolor", "http://tools.jb51.net/color/japancolor", "http://tools.jb51.net/color/colorcha", "http://tools.jb51.net/color/jPicker", "http://tools.jb51.net/color/colordp", "http://tools.jb51.net/color/color_picker", "http://tools.jb51.net/color/rgb_hex_hsl", "http://tools.jb51.net/color/select_color", "http://tools.jb51.net/color/safe_color", "http://tools.jb51.net/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.jb51.net/"; }; 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(); }
PS:这里再为大家推荐几款本站的相关在线工具:
在线 RGB、HEX 颜色代码生成器:
RGB 颜色查询对照表_颜色代码表_颜色的英文名称大全:
在线网页调色板工具:
在线颜色选择器工具 / RGB 颜色查询对照表:
更多关于 JavaScript 相关内容可查看本站专题:《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0718/329326.html