简明现代魔法 -> JavaScript -> JavaScript实现的颜色选择器

JavaScript实现的颜色选择器

2010-11-20

效果演示

下面的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="background-color:' + color + ';"> </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="background-color:' + color + ';"></div>');
			}
		}
		document.writeln('</div>');
	}
}
// ]]>
</script>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们