页面背景是网页设计中必不可少的重要内容之一，其背景的好坏直接影响网页浏览者的浏览兴趣。网页背景分为背景图和背景色两种，对于普通的背景图和背景色，完全可以通过HTML实现，而要实现复杂的背景效果，则需要借助于JavaScript。本章介绍页面背景的一些实现效果。首先是一个页面背景随机切换的实例:然后，通过3种不同的方法，分别实现用户对页面背景的自动选择:最后，介绍一个闪电的页面背景效果。
随机更换页面背景
本节给出一段随机更换页面背景的示例代码，当用户每次刷新页面时，都会出现与前一次不同的页面背景。
要点
本节代码主要使用了Math对象的random()方法和fo0r()方法，两个方法的主要功能和用法如下。
- Math 对象用于进行数学运算，其属性是数学中一些常见的常数值，在程序中，这些属性可以直接使用。
- 在Mat对象的方法中，除了random()之外的所有方法都需要一个或几个参数。典型的是三角函数在作为一个参数的值上进行操作，其他参数决定传递的参数中哪一个是最大值或最小值。random()方法没有参数，返回 0~1之间的随机浮点数。Math.foor(n)方法表示小于或等于n的整数。
- 如果要生成0和上限之间的随机数，可使用“Math.floor(Math.random()*n)”的格式，其中n表示上限。
- 若要生成不同范围的随机数，可以使用首先“Math.floor(Math.random()*n)+m”的格式,其中 m是下限，n是上限。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>随页面刷新更换页面背景</title>
<script LANGUAGE="JavaScript">
<!--
bg = new Array(3); //设定图片数量，注意数组下标从0开始
bg[0] = '随机更换页面背景1.gif' //显示的图片路径，可用http://
bg[1] = '随机更换页面背景2.gif'
bg[2] = '随机更换页面背景3.gif'
bg[3] = '随机更换页面背景4.gif'
//随机选择图片，并保存在index中
index = Math.floor(Math.random() * bg.length);
//将选择的图片作为页面背景进行显示
document.write("</head><BODY BACKGROUND="+bg[index]+">");
//-->
</script>
<h1><font color="white">随页面刷新更换页面背景</font></h1><hr>
<font color="white">每次刷新页面都会更换不同的背景图片，共有4种图片可供随机选择。</font>
</body>
</html>分析
- (1)程序首先建立了一个名为bg的数组，该数组包含4个元素，分别是4个不同的背景图片。如果要改变页面背景的可选数量，可以改变这里数组的元素数量。
- (2)随后，使用“Math.floor(Math.random()*bg.length)”生成一个0与数组长度之间的随机数，并将其存储在变量imndex中。
- (3)最后，使用 document.write()语句，将<body>的 background 属性设置为刚刚产生的随机数。这样,当每次刷新页面时,都会产生一个不同的随机数,程序运行到 document.write()语句时，就会更换页面的背景图像。
- (4)由于图片是随机产生的，因此，程序每次运行时产生的结果都可能是不同的，并且，刷新页面后，可能选择了与上次相同的图片，因此，会给人背景未变的感觉。
用户自选背景之一
本节给出一段用户自选背景色的示例代码，当鼠标指针指向页面中的色块时，页面背景随之变为色块所指示的颜色。
要点
本节代码主要使用了onmouseover事件、document.bgColor 属性、作为属性值使用JavaScript，主要功能和用法如下。
- onmouseover事件，当鼠标指针移动至某个页面元素时被触发。
- document.bgColor 属性用于设置当前文档的背景色，常用于进行写入操作。
- HTML, 中的超链接标签<a>的 href属性值除了可以使用 http和mailto 等协议外，还可以使用 JavaScript，使用方式为“<ahref="javascript:alert(new Date();)">JavaScript</a>”。
- JavaScript 扩展了标准的 HTML,为 HTML,标签增加了各种事件属性,例如,对于 button表单元素，可以设置一个新的属性 onclick，onclick属性值就是一段JavaScript 代码，单击该按钮后，onclick属性值中的JavaScript代码就会被浏览器解释执行。例如“<imputtype = button value = test onclick = "alert(new Date();">”。
- 用作 URL 的 JavaScript 代码前要增加“javascript:”，以说明使用的是 JavaScript 协议,而事件属性中的JavaScript代码前不需要增加javascript:进行说明。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2
最低0.47元/天 解锁文章
扫一扫
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
