JavaScript特效实例012-网页拾色器

时间：2015-05-17 12:15:21 收藏：0 阅读：120

实例012 网页拾色器

实例说明

在网站中经常需要用户自定义颜色来显示某些信息。这可以在网页添加一个拾色器来实现。

技术要点

在本实例中仅使用216种浏览器安全的颜色，即所谓的Netscape色块。这216种颜色分别代表0、51、102、153、204这5个颜色值以及每一种原色（即红、绿、蓝）。这些十进制数值对应的十六进制数分别为0x00、0x33、0x66、0x99、0xCC和0xFF。在HTML的颜色属性中黑色是#000000，纯红色是#FF0000，纯绿色就是#00FF00，纯蓝色是#0000FF，而白色是#FFFFFF。在实现网页拾色器时需要应用JavaScript数组。创建数组可以有以下三种方法。

（1）无参数调用。

<span style="white-space:pre">	</span>var h = new Array()

（2）指定数组前n个元素的值

var h = new Array(arglist)

（3）指定具有的元素个数

var h = new Array(n)

实现过程

（1）实现点击颜色框，弹出网页拾色器网页index.html

<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8" />
    	<script type="text/jscript" language="javascript">
			function pp(field)
			{
				var rtn = window.showModalDialog("color.html","","dialogWidth=220px;dialogHeight=200px;status=no;help=no;scrollbars=no")
				if(rtn!=null)
				{
					field.style.background= rtn
				}
				return;
			}
        </script>
    </head>
    <body>
    	<input type="text" readonly="yes" id="color" name="color" size=3 style="background:#000000" value = "" onclick = "pp(this)">
    </body>
</html>

(2)网页拾色器color.html

<script language="javascript">
		var h = new Array(6);
		h[0] = "FF";
		h[1] = "CC";
		h[2] = "99";
		h[3] = "66";
		h[4] = "33";
		h[5] = "00";
		function action(RGB)
		{
			parent.window.returnValue = "#"+RGB;
			window.close();
		}
		function Mcell(R,G,B)
		{
			document.write('<td bgcolor="#'+R+G+B+'">');
			document.write('<a href="#" onclick="action(\''+(R+G+B)+'\')">');
			document.write('<img border=0 height=12 width=12\')"alt=\'#'+R+G+B+'\'>');
			document.write('</a>');
			document.write('</td>');
		}
		function Mtr(R,B)
		{
			document.write('<tr>');
			for (var i = 0; i <6; ++i)
			{
				Mcell( R , h[i] , B );
			}
			document.write('</tr>');
		}
		function Mtable(B)
		{
			document.write('<table cellpadding=0 cellspacing=0 border=0>');
			for(var i = 0;i<6;++i)
			{
				Mtr(h[i],B);
			}
			document.write('</table>')
		}
		function Mcube()
		{
			document.write('<table cellpadding=0 cellspacing=0 border=0>');
			for(var i = 0;i<6;++i)
			{
				if(i%3 == 0)
				{
					document.write('<tr>')
				}
				document.write('<td bgcolor=#000000">');
				Mtable(h[i]);
				document.write('</td>')
				if(i%3==2)
				{
					document.write('</tr>')
				}
			}
			document.write('</table>');
		}
		Mcube();
	</script>

注：style标签的内容为css的知识，我们关注的是script标签内的内容。

这样我们的这个实例就做好了。