<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<?xml version="1.0" encoding="utf-8"?><HTML xml:lang="zh"
xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>混色器_语法参考_书社_e路网</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content=这是是一个简易的在线混色器,根据RBG三原色得到一种颜色 name=discrpiton>
<META content=all name=robots>
<style>
BODY {
BACKGROUND-IMAGE: url(background.gif); TEXT-ALIGN: center
}
H1 {
FONT-SIZE: 24px; COLOR: #006699
}
A {
TEXT-DECORATION: none
}
.hr {
WIDTH: 450px; HEIGHT: 1px
}
.container {
BORDER-RIGHT: #333333 1px solid; PADDING-RIGHT: 30px; BORDER-TOP: #333333 1px solid; PADDING-LEFT: 30px;
FONT-SIZE: 12px; BACKGROUND-IMAGE: url(text_bg.gif); PADDING-BOTTOM: 30px; MARGIN: 30px; BORDER-LEFT: #333333 1px
solid; WIDTH: 450px; PADDING-TOP: 30px; BORDER-BOTTOM: #333333 1px solid; TEXT-ALIGN: center
}
#mLock {
VISIBILITY: hidden; POSITION: relative; TOP: 4px; TEXT-ALIGN: center
}
.dropdown {
FONT-SIZE: 8pt; WIDTH: 50px; FONT-FAMILY: arial
}
#mContainer {
FONT-SIZE: 8pt; LEFT: 10px; WIDTH: 200px; FONT-FAMILY: arial; POSITION: relative; TOP: 5px; HEIGHT: 200px
}
.mForm {
LEFT: 0px; POSITION: absolute; TOP: 10px
}
#palette {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT-SIZE: 1px; LEFT: 0px; BORDER-LEFT:
#000000 1px solid; WIDTH: 157px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; TOP: 80px; HEIGHT: 40px;
BACKGROUND-COLOR: #000000
}
.eColor {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; Z-INDEX: 5; BORDER-LEFT: 1px solid; WIDTH: 20px; BORDER-
BOTTOM: 1px solid; POSITION: absolute; TOP: 52px; HEIGHT: 20px; BACKGROUND-COLOR: #000000
}
.colorRange {
POSITION: absolute; TOP: 130px
}
.individualColor {
BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; CURSOR: crosshair; BORDER-RIGHT-
WIDTH: 1px
}
#hex_container {
FONT-SIZE: 12px; LEFT: 0px; WIDTH: 157px; FONT-FAMILY: arial; POSITION: absolute; TOP: 190px; TEXT-ALIGN:
center
}
#hex {
BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #ffffff 1px
solid; WIDTH: 82px; COLOR: #000000; BORDER-BOTTOM: #ffffff 1px solid; FONT-FAMILY: arial; HEIGHT: 15px
}
.geourl {
BORDER-RIGHT: #063 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #3c6 1px solid; PADDING-LEFT: 3px; FONT-WEIGHT:
bold; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #3c6 1px solid; COLOR: white; PADDING-TOP: 0px;
BORDER-BOTTOM: #063 1px solid; FONT-FAMILY: verdana, sans-serif; BACKGROUND-COLOR: #093; TEXT-DECORATION: none
}
.rss {
BORDER-RIGHT: #d30 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #fc4 1px solid; PADDING-LEFT: 3px; FONT-WEIGHT:
bolder; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #fc4 1px solid; COLOR: white; PADDING-TOP:
0px; BORDER-BOTTOM: #d30 1px solid; FONT-FAMILY: verdana, sans-serif; BACKGROUND-COLOR: #f60; TEXT-DECORATION: none
}
.technorati {
BORDER-RIGHT: #030 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #9f0 1px solid; PADDING-LEFT: 3px; FONT-WEIGHT:
bold; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #9f0 1px solid; COLOR: white; PADDING-TOP: 0px;
BORDER-BOTTOM: #030 1px solid; FONT-FAMILY: verdana, sans-serif; BACKGROUND-COLOR: #9c0; TEXT-DECORATION: none
}
.atom {
BORDER-RIGHT: #006 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #9ff 1px solid; PADDING-LEFT: 3px; FONT-WEIGHT:
bold; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #9ff 1px solid; COLOR: white; PADDING-TOP: 0px;
BORDER-BOTTOM: #006 1px solid; FONT-FAMILY: verdana, sans-serif; BACKGROUND-COLOR: #09f; TEXT-DECORATION: none
}
.foaf {
BORDER-RIGHT: #333 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; FONT-WEIGHT:
bold; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 0px; BORDER-
BOTTOM: #333 1px solid; FONT-FAMILY: verdana, sans-serif; BACKGROUND-COLOR: #777; TEXT-DECORATION: none
}
.foaf_f1 {
COLOR: #ff6666
}
.foaf_o {
COLOR: #98cb98
}
.foaf_a {
COLOR: #ffff9f
}
.foaf_f2 {
COLOR: #99ccff
}
.w3c_check {
BORDER-RIGHT: #988 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #ffc 1px solid; PADDING-LEFT: 3px; FONT-WEIGHT:
bold; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffc 1px solid; COLOR: black; PADDING-TOP: 0px;
BORDER-BOTTOM: #988 1px solid; FONT-FAMILY: verdana, sans-serif; BACKGROUND-COLOR: #fc6; TEXT-DECORATION: none
}
.check {
FONT-WEIGHT: bolder; COLOR: #9c0000
}
.cc {
BORDER-RIGHT: #030 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #cfe 1px solid; PADDING-LEFT: 3px; FONT-WEIGHT:
bold; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #cfe 1px solid; COLOR: white; PADDING-TOP: 0px;
BORDER-BOTTOM: #030 1px solid; FONT-FAMILY: verdana, sans-serif; BACKGROUND-COLOR: #446666; TEXT-DECORATION: none
}
.print {
BORDER-RIGHT: #333 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 3px; FONT-WEIGHT:
bold; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ddd 1px solid; COLOR: black; PADDING-TOP: 0px;
BORDER-BOTTOM: #333 1px solid; BACKGROUND-COLOR: #d4d0c8; TEXT-DECORATION: none
}
.tech_link {
TEXT-ALIGN: center
}
.ee {
BORDER-RIGHT: #006 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #9ff 1px solid; PADDING-LEFT: 3px; FONT-WEIGHT:
bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #9ff 1px solid; COLOR: white; PADDING-TOP: 0px;
BORDER-BOTTOM: #006 1px solid; FONT-FAMILY: 宋体,verdana; BACKGROUND-COLOR: #4169e1; TEXT-DECORATION: none
}
.tech_link {
TEXT-ALIGN: center
}
.copyright {
FONT-SIZE: 12px; TEXT-ALIGN: center
}
</style>
<SCRIPT type=text/javascript>
var hexValues = new Array
('00','01','02','03','04','05','06','07','08','09','0A','0B','0C','0D','0E','0F','10','11','12','13','14','15','16','
17','18','19','1A','1B','1C','1D','1E','1F','20','21','22','23','24','25','26','27','28','29','2A','2B','2C','2D','2E
','2F','30','31','32','33','34','35','36','37','38','39','3A','3B','3C','3D','3E','3F','40','41','42','43','44','45',
'46','47','48','49','4A','4B','4C','4D','4E','4F','50','51','52','53','54','55','56','57','58','59','5A','5B','5C','5
D','5E','5F','60','61','62','63','64','65','66','67','68','69','6A','6B','6C','6D','6E','6F','70','71','72','73','74'
,'75','76','77','78','79','7A','7B','7C','7D','7E','7F','80','81','82','83','84','85','86','87','88','89','8A','8B','
8C','8D','8E','8F','90','91','92','93','94','95','96','97','98','99','9A','9B','9C','9D','9E','9F','A0','A1','A2','A3
','A4','A5','A6','A7','A8','A9','AA','AB','AC','AD','AE','AF','B0','B1','B2','B3','B4','B5','B6','B7','B8','B9','BA',
'BB','BC','BD','BE','BF','C0','C1','C2','C3','C4','C5','C6','C7','C8','C9','CA','CB','CC','CD','CE','CF','D0','D1','D
2','D3','D4','D5','D6','D7','D8','D9','DA','DB','DC','DD','DE','DF','E0','E1','E2','E3','E4','E5','E6','E7','E8','E9'
,'EA','EB','EC','ED','EE','EF','F0','F1','F2','F3','F4','F5','F6','F7','F8','F9','FA','FB','FC','FD','FE','FF');
cSelected=false;
xDivs = new Array("dRed","dGreen","dBlue");
xColors = new Array("red","green","blue");
function initPage() {
buildDropdowns();
sx=10;
for(i=0;i<xDivs.length;i++) { document.getElementById(xDivs[i]).style.pixelLeft=sx;sx+=55; }
}
function doHex() {
r = document.frm1.red.value;
g = document.frm1.green.value;
b = document.frm1.blue.value;
derivedColor = hexValues[r] + hexValues[g] + hexValues[b];
document.getElementById("palette").style.backgroundColor = derivedColor;
document.getElementById("dRed").style.backgroundColor = hexValues[r] + "0000";
document.getElementById("dGreen").style.backgroundColor = "00" + hexValues[g] + "00";
document.getElementById("dBlue").style.backgroundColor = "0000" + hexValues[b];
for(i=0;i<xDivs.length;i++)document.getElementById(xDivs[i]).title= document.getElementById(xDivs
[i]).style.backgroundColor.toUpperCase();
document.getElementById("hex").value = "#" + derivedColor;
}
function buildDropdowns() {
for(x=0;x<3;x++) {
targetSelect = document.forms['frm1'].elements[xColors[x]];
createColorRange(xColors[x]);
document.frm1[xColors[x]].style.color=xColors[x];
for(i=0;i<256;i++)targetSelect.options[targetSelect.options.length] = new Option(i,i);
}
}
function createColorRange(who) {
startY=0;startX=0;trackRow=0;
mHTML="";
for(i=0;i<256;i+=1) {
switch(who) {
case "red": hx=hexValues[i] + "0000";break;
case "green": hx="00" + hexValues[i] + "00";break;
case "blue": hx="0000" + hexValues[i];break;
}
mHTML+="<div onmouseover=\"handleMouseOver('" + who + "'," + i + ")\" class=\"individualColor\"
onclick=\"setColor('" + who + "'," + i + ");\" id=\"rc" + i + "\" style=\"position:absolute;background-color:" + hx
+";top:0px;font-size:1px;width:3px;height:3px;top:" + startY + ";left:" + startX + ";\"></div>";
startX+=3;trackRow++;
if(trackRow==16) {
trackRow=0;
startY+=3;
startX=0;
}
}
eval('document.getElementById("colorRange_' + who + '").innerHTML = mHTML');
}
function handleMouseOver(who,dColor) {
if(!cSelected) {
eval('document.frm1.' + who + '.selectedIndex=' + dColor);
doHex();
}
}
function setColor(who,dColor) {
if(!cSelected){
eval('document.frm1.' + who + '.selectedIndex=' + dColor);
doHex();
cSelected=true;
hs_lock(1);
} else {
cSelected=false;
hs_lock(0);
}
}
function hs_lock(which) {
which?document.getElementById("mLock").style.visibility="visible":document.getElementById
("mLock").style.visibility="hidden";
}
function dd_onChange() {
doHex();
cSelected=true;
hs_lock(1);
}
</SCRIPT>
<META content="MSHTML 6.00.2800.1498" name=GENERATOR></HEAD>
<BODY onload=initPage();>
<H1>混色器</H1>
<HR class=hr>
<DIV class=container>
<DIV id=mLock>锁定颜色<IMG alt=调色板已锁定,点击调色板解锁. src="tools/ksq/lock.gif"></DIV>
<DIV id=mContainer>
<FORM class=mForm id=frm1 name=frm1 action=""><SELECT class=dropdown id=red
onchange=dd_onChange();><OPTION selected></OPTION></SELECT> <SELECT
class=dropdown id=green onchange=dd_onChange();><OPTION
selected></OPTION></SELECT> <SELECT class=dropdown id=blue
onchange=dd_onChange();><OPTION selected></OPTION></SELECT> </FORM>
<DIV id=palette></DIV>
<DIV class=eColor id=dRed style="LEFT: 10px"></DIV>
<DIV class=eColor id=dGreen style="LEFT: 65px"></DIV>
<DIV class=eColor id=dBlue style="LEFT: 120px"></DIV>
<DIV class=colorRange id=colorRange_red style="LEFT: 0px"></DIV>
<DIV class=colorRange id=colorRange_green style="LEFT: 55px"></DIV>
<DIV class=colorRange id=colorRange_blue style="LEFT: 110px"></DIV>
<DIV id=hex_container><INPUT id=hex style="TEXT-ALIGN: center" value=#000000
name=xHex> </DIV></DIV></DIV>
<HR class=hr></BODY></HTML>
