实现简易的javascript倒计时
<html>
<head>
<script language="javascript">
var timerID = null;
var timerRunning = false;
var leftsec=60;
var leftmin=60;
var lefthour=2;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function startclock () {
stopclock();
showtime();
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var timeValue = now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日" +((hours >= 12) ? " 下午 " : " 上午 " );
var lefttime = ((hours >12) ? hours -12 :hours)+((minutes < 10) ? "小时0" : "小时") +
minutes+((seconds < 10) ? "分0" : "分") + leftsec+"秒";
timeValue += ((hours >12) ? hours -12 :hours);
timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
document.getElementById('thetime').innerHTML = timeValue;
timerID = setTimeout("showtime()",500);
timerRunning = true;
}
</script>
<SCRIPT Language="JavaScript">
secs = 59; // Number of secs to delay -CHINA-studio
wait = secs * 100;
minute = 5;//考试总时间
//循环调用秒的减方法
cycle();
function cycle(){
for(i=0;i<=(wait/100);i++) {
//将i*1000改为i*100查看最后的效果
window.setTimeout("doUpdate(" + i + ")",i*1000);
}
}
function doUpdate(num) {
if(num == (wait/100)) {
cycle();
//三分钟前提醒考生交卷
if(minute==3){
alert("还有三分钟时间，请及时交卷！");
}
//时间到，提交表单
if(minute<=0){
document.exam.action="http://zhousipk.blog.sohu.com";
document.exam.submit();
}
minute--;
} else {
wut = (wait/100)-num;
//使得输出格式为00:00
s=wut<10?"0"+wut:wut;
m=minute<10?"0"+minute:minute;
//将剩余时间显示在页面上
document.getElementById('lefttime').innerHTML = "剩余时间："+ m+"分"+s + "秒";
}
}
</SCRIPT>
</head>
<body style="margin:0px" scroll="no" onLoad="javascript:startclock()">
<FORM action="" method="post" name="exam">
<table width="100%" height="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="58" valign="top">
<table width="100%" height="58" border="0" cellspacing="0"
cellpadding="0" bgcolor="#799ae1">
<tr>
<td width="2%"> </td>
<td width="80%" height="58">
<div align="center"><b><font color="white" size=5>cloud4j's在线考试系统</font></b><br>
</div>
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td style="WIDTH: 100%;">
<IFRAME
style="Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%; HEIGHT: 100%"
name="main" frameborder="0" scrolling="auto"
src=""></IFRAME>
</td>
</tr>
<tr>
<td height="20" colspan="3" valign="middle" align="center"
background="images/main_bottom.gif">
<table border="0" width="100%" valign="middle" height="30"
align="center" bgcolor="#799ae1">
<tr align="left">
<td> </td>
<td width="25%" align="right"><span class="index_text">当前考生姓名:
cloud4j</span></td>
<td align="center" width="15%"></td>
<td width="25%" align="left"><span id="thetime"
class="index_text"></span></td>
<td width="20%" align="left"><font color="red"></font><span id="lefttime"
class="index_text"></span></td>
<TD width="5%"></TD>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</FORM>
</body>
</html>
0
131
4KB
2011-12-05
15
