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

需求：

限定登录时间在60 s之内，如图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所示的不能访问标签对象的错误。