JavaScript颜色选择器的实现

下面的JavaScript取色器可以方便网页设计取色，同时也可以看一下，网上常见的取色器是如何实现的。这里只给出了核心的JavaScript代码，其它部分比如CSS可以参照本页的源代码。

JavaScript Code

<script type="text/javascript">
// <![CDATA[
function selectColor(o) {
	o.style.backgroundColor = '#FFF';
	o.style.border = 'solid 10px ' + (o.value == '' ? 'black' : o.value);
}
function showColor(color) {
	document.getElementById('txtColor').style.border = 'solid 10px ' + color;
}
function setColor(color) {
	var txtColor = document.getElementById('txtColor');
	txtColor.value = color;
	txtColor.style.backgroundColor = color;
	txtColor.select();
	txtColor.focus();
}
var c = '0123456789ABCDEF';
for (var r = 0; r < c.length; r++) {
	var color = '#' + c.charAt(r) + c.charAt(r) + c.charAt(r);
	document.write('<span onclick="setColor(\'' + color + '\');" onmouseover="showColor(\'' + color + '\');" style=""> </span>');
}
document.writeln('<div style="clear:both; height:5px;"></div>');
var begin = 0;
for (var i = 0; i < 2; i++) {
	begin = i * 8;
	for (var r = 0; r < c.length; r++) {
		document.writeln('<div class="clear">');
		for (var g = begin; g < begin + 8; g++) {
			for (var b = 0; b < c.length; b++) {
				var color = '#' + c.charAt(r) + c.charAt(g) + c.charAt(b);
				document.write('<div onclick="setColor(\'' + color + '\');" onmouseover="showColor(\'' + color + '\');" style=""></div>');
			}
		}
		document.writeln('</div>');
	}
}
// ]]>
</script>