第16章-利用JavaScript制作网页特效.pptVIP

2. 上机操作题 利用JavaScript制作如图16.18所示的特效网页。 * 教学内容：利用JavaScript可以轻松制作网页特效，如可以制作显示当前时间、跟随鼠标的文字。本章就来介绍利用JavaScript制作时间特效、图像特效、窗口特效、鼠标特效和其他一些常见特效的方法。 第16章 利用JavaScript制作网页特效 教学重点 掌握时间特效的应用 掌握图像特效的应用 掌握窗口特效的应用 掌握鼠标特效的应用 掌握其他特效的应用 16.1 时间特效 在网页中经常可以看到各种各样的动态时间显示，在网页中合理地使用时间可以增加网页的时效感。下面通过实例讲述时间特效的制作。 在很多的网页上都显示当前的时间，下面利用getHours()、getMinutes()、getSeconds()分别获得当前小时数、获得当前分钟数、获得当前秒数，然后给时间变量timer赋值，最后在文本框中显示当前时间。 16.1.1 显示当前时间 首先定义一个星期数组initArray()，然后利用getYear()、getMonth()、getDate()、getDay()分别获得当前年份、获得当前月份、获得当前日数、获得当前星期。 16.1.2 显示当前日期 16.1.3 显示网页停留时间 显示网页停留时间也是一种常见的网页特效。首先用form定义一个表单，然后在表单内使用input标记定义一个文本框，然后定义一个function update()函数计算停留时间，最后利用“document.forms.input1.value=hour+时+min+分+sec+秒”在文本框中显示停留时间 。 16.1.4 制作倒计时特效 倒计时特效可以让用户明确知道到某个日期剩余的时间，制作倒计时特效的具体操作步骤如下。 图像是文本的解释和说明，在网页中的适当位置放置一些图像，不仅可以使文本更加容易阅读，而且可以使网页更加具有吸引力。利用JavaScript可以制作各种各样的图像特效。 16.2 图像特效 16.2.1 当鼠标指针经过图像时图像震动效果 下面制作当鼠标指针放在图像上的时候，图像出现震动的效果，具体操作步骤如下。 16.2.2 图片闪烁效果 制作图片闪烁效果主要是利用style.visibility属性来表示元素的可见性。制作图片闪烁效果的具体操作步骤如下。 利用图像数组可以实现自动切换图像效果，具体操作步骤如下。 16.2.3 自动切换图像 在JavaScript中还提供了窗口对象的方法和属性，通过这些方法和属性可以制作出各种各样的窗口特效。下面以实例来看看窗口特效的具体应用。 16.3 窗口特效 16.3.1 全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口，具体操作步骤如下。 制作定时关闭窗口的具体操作步骤如下。 16.3.2 定时关闭窗口 利用JavaScript还可以制作出各种各样的鼠标特效，下面就通过三个实例讲述禁止鼠标右击、跟随鼠标指针的图像和跟随鼠标指针的滚动字幕效果的制作。 16.4 鼠标特效 16.4.1 禁止鼠标右击 在一些网页上，当用户单击鼠标右键时会弹出警告窗口或者直接没有任何反应。其作用是让用户无法使用鼠标右键中的相应功能，从而限制用户一定的操作权限。 16.4.2 跟随鼠标指针移动的图像 跟随鼠标指针移动的图像是一种特殊的鼠标效果，跟随鼠标指针移动的图像具体操作步骤如下。 跟随鼠标指针的滚动字幕的具体操作步骤如下。 16.4.3 跟随鼠标指针的滚动字幕 可以制作网站上其他常见的特效。 16.5 其他特效 设置为首页和加入收藏夹是网页中最常见的特效，具体操作步骤如下。 16.5.1 设置为首页和加入收藏夹 16.5.2 浏览器状态栏显示信息 浏览器状态栏信息是由windows对象中的status属性来进行控制的，浏览器状态栏显示信息的具体操作步骤如下 。 16.5.3 进入网站的口令设置 进入网站的口令设置的具体操作步骤如下。 16.6经典习题 1. 填空题 （1）在很多的网页上都显示当前的时间，利用__________、__________、__________分别获得当前小时数、获得当前分钟数、获得当前秒数。 （2）浏览器状态栏信息是由windows对象中的__________属性来进行控制的。