创建一个html文档,实现考试计时的功能,即从文档打开开始计算,50分钟时提示离考试结束还有10分钟,60分钟中,提示考试结束,并自动关闭窗口。
话不多说,赶紧看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<body>
距离考试结束还剩<div id="cal"></div><br>
<button onclick="start()">开始考试</button>
<script type="text/javascript">
var min=60;
var sec=0;
var t;
function start() {
clock();
if(sec==0){
min--;
sec=60;
}
sec--;
if(min==10){
alert("距离考试结束还剩10分钟");
}
if(min==0){
alert("考试结束");
window.clearTimeout(t);
window.close();
}
//设置计时器,1000毫秒(即1秒)调用函数
t=setTimeout("start()",1000);
}
//输出样式判断
function clock() {
if(min<10&&sec<10)
document.getElementById("cal").innerHTML="0"+min+":"+"0"+sec;
else if(min<10)
document.getElementById("cal").innerHTML="0"+min+":"+sec;
else if(sec<10)
document.getElementById("cal").innerHTML=min+":"+"0"+sec;
else
document.getElementById("cal").innerHTML=min+":"+sec;
}
</script>
</body>
</html>
一个简单的考试倒计时就这样实现了。
除了用setTimeout()和clearTimeout()这两个函数实现倒计时功能,还可以使用与这两个函数相似的setInterval()和clearInterval()函数来实现,代码都是差不多的,这里就不发了。