上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
1.9 倒计时载入页面
【实例描述】
倒计时是常用的载入页面时的等待方式，本例学习如何计算倒计时的时间，同时学习自动加载页面的相关设置。
【实现代码】
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<meta http-equiv="refresh" content="11; url=http://www.google.com">
<script language="JavaScript">
//获取当前时间
startday = new Date();
clockStart = startday.getTime();
function initStopwatch()
{
var myTime = new Date();
var timeNow = myTime.getTime();
var timeDiff = timeNow - clockStart; //获取间隔时间
this.diffSecs = timeDiff/1000; //因为时间以毫秒为单位
return(this.diffSecs); //返回间隔秒数
}
function getSecs()
{
var mySecs = initStopwatch();
var mySecs1 = ""+mySecs;
//以倒计时方式显示时间
mySecs1= 10 - eval(mySecs1.substring(0,mySecs1.indexOf("."))) + "秒";
document.form1.timespent.value = mySecs1;
window.setTimeout('getSecs()',1000);
}
</script>
</head>
<body bgcolor="#ffffff" onLoad="window.setTimeout('getSecs()',1)">
<center>
10秒后将加载页面:
<form name=form1><input size=9 name=timespent></form>
</center>
</body>
</html>
【运行效果】
倒计时等待效果如图1-7所示。
图1-7 倒计时等待效果
【难点剖析】
本例的重点是加载页面、计算剩下的时间。加载页面使用的是Meta元素，其包含一个属性Content，它包含两个参数：需要等待的时间和要加载的页面地址。计算剩余时间使用了两个日期相减的方式，注意相减的结果是毫秒数。