码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-05-17 12:15:21      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:javascript

实例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标签内的内容。
这样我们的这个实例就做好了。




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

标签:javascript

原文地址:http://blog.csdn.net/yejinwei1220/article/details/45786663

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!