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

最新推荐文章于 2024-03-12 21:09:43 发布

迷茫的寻路者

最新推荐文章于 2024-03-12 21:09:43 发布

阅读量1k

点赞数

分类专栏： JavaScript网页特效范例文章标签： javascript

本文链接：https://blog.csdn.net/yejinwei1220/article/details/45786663

版权

JavaScript网页特效范例专栏收录该内容

19 篇文章 0 订阅

订阅专栏

实例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="#" οnclick="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标签内的内容。

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

迷茫的寻路者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript特效实例012-网页拾色器

实例012 网页拾色器实例说明在网站中经常需要用户自定义颜色来显示某些信息。这可以在网页添加一个拾色器来实现。技术要点在本实例中仅使用216种浏览器安全的颜色，即所谓的Netscape色块。这216种颜色分别代表0、51、102、153、204这5个颜色值以及每一种原色（即红、绿、蓝）。这些十进制数值对应的十六进制数分别为0x
复制链接

扫一扫

专栏目录