任务2-4 限时关闭窗口的实现

需求:

限定登录时间在60 s之内,如图2-7所示。在登录界面的下面显示登录进度栏和“登录还剩??秒”字样。

分析:

本任务需要使用系统的定时事件实现时间的计数。定时事件是增加页面动态效果的首选方法。

图2-7 添加限时的登录窗口

实现:

第一步,新建文件夹04,复制任务2-3中的页面。

第二步,在登录界面DIV中添加两个DIV用于显示进度和文本,id分别为remainGraph和remainText,定位方式为绝对定位,显示进度的DIV将其背景色设置为绿色,显示文本的DIV设置其文本对齐方式为右对齐。

将两个DIV拖放到合适位置,并按显示要求设置其宽度。

至此,两个DIV的属性设置如清单2-9所示。

清单2-9 进度条与进度文本DIV层的定义

注:remainGraph设置为120px,它是剩余时间的整数倍。

第三步,定义并调用定时事件处理函数,代码如清单2-10所示。

清单2-10 定时事件处理函数的定义与调用(有参数)

说明

(1)语句remtime(60)不在函数体内,是全局语句,在加载页面过程中遇到即被执行,而函数体内的语句只有在调用函数时才可能被执行。

(2)语句setTimeout("remtime("+rem.toString()+")",1000)表示1000ms后执行remtime("+rem.toString()+")字符串所表示的语句,格式与remtime(60)相似。

(3)语句remtime(60)只执行一次,而语句setTimeout("remtime("+rem.toString()+")",1000)可能会执行多次,本任务中被执行了59次。如果使用全局变量保存剩余时间,则可用清单2-11脚本实现相同的功能。

清单2-11 定时事件处理函数的定义与调用(无参数)

(4)以上脚本不能放在DIV定义之前,否则会造成图2-8所示的不能访问标签对象的错误。

图2-8 IE在JavaScript代码出错时弹出的提示窗口