JavaScript颜色选择器的实现 - 复活的老羊

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>