js实现的在线调色板功能完整实例实现的在线调色板功能完整实例
主要介绍了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>