<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>取色</title>
<style type="text/css"><!--
body { width:90%;font-size:12px; color:#000000; font-family: Georgia, Arial; margin: 20px;}
td { border-top:1px solid #000000; }
div {float:left;}
.border { border:1px solid #000000; width:255px; }
.red,.green,.blue { border:none; width:0px;}
.red { background: red;}
.green { background: green;}
.blue { background: blue;}
#show { background:#000000;width:100px;}
--></style>
<script type="text/javascript">
function color(obj, onobj)
{
var e = window.event ? window.event : color.caller.arguments[0];
var oo = document.getElementById(obj);
var widthpx = e.clientX - fetchOffset(oo) >= 0 ? (e.clientX - fetchOffset(oo) <= 255 ? e.clientX - fetchOffset(oo) : 255) : 0;
oo.style.width = widthpx + 'px';
onobj.onmousemove = function()
{
color(obj, onobj);
}
onobj.onmouseup = function()
{
onobj.onmousemove = null;
};
showcolor();
}
function showcolor()
{
var vred = 0;
if(parseInt(document.getElementById('red').style.width.replace('px', ''))!='NaN')
{
vred = parseInt(document.getElementById('red').style.width.replace('px', ''));
}
var vgreen = 0;
if(parseInt(document.getElementById('green').style.width.replace('px', ''))!='NaN')
{
vgreen = parseInt(document.getElementById('green').style.width.replace('px', ''));
}
var vblue = 0;
if(parseInt(document.getElementById('blue').style.width.replace('px', ''))!='NaN')
{
vblue = parseInt(document.getElementById('blue').style.width.replace('px', ''));
}
var value = '#' + tohex(vred) + tohex(vgreen) + tohex(vblue);
document.getElementById('show').style.background = value;
document.getElementById('code').value = value;
}
function tohex(inv)
{
var hex = inv.toString(16);
if(hex=='NaN')
hex = '00';
if(hex.length < 2)
hex = '0' + hex;
return hex;
}
function fetchOffset(obj) {
var left_offset = obj.offsetLeft;
while((obj = obj.offsetParent) != null) {
left_offset += obj.offsetLeft;
}
return left_offset;
}
</script>
</head>
<body>
<table cellspacing="1" cellpadding="1" style="border:1px solid #000000;width:360px;" align="center">
<tr><td colspan="2">调色</td></tr>
<tr><td><div class="border" onmousedown="color('red', this);"><div class="red" id="red" onmousedown="color('red', this);"> </div></div></td><td rowspan="3" id="show"> </td></tr>
<tr><td><div class="border" onmousedown="color('green', this);"><div class="green" id="green" onmousedown="color('green', this);"> </div></div></td></tr>
<tr><td><div class="border" onmousedown="color('blue', this);"><div class="blue" id="blue" onmousedown="color('blue', this);"> </div></div></td></tr>
<tr><td colspan="2">颜色代码：<input type="text" style="width:100px;" id="code" value="#000000" /></td></tr>
</table>
</body>
</html>
[此贴子已经被作者于2007-8-21 9:01:45编辑过]
