<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title>倒计时 - js</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// Interval 的 id,用于取消定时
var interId;
/**
* 取消 倒计时,并重新发送验证码
*/
function resendCode() {
clearInterval(interId);
$('#remainTime').val("10000");
$("#sessionFlag").val("vali");
countMainFunction("countdown()",10000);
}
/**
* 倒计时
*/
function countdown() {
// 获得剩余时间
var t = $('#remainTime').val();
if(t <= 0) { // 已经到时间了,则停止倒计时
$("#valiCode").val(); // 若时间已到了,则清空验证码输入栏
$("#sessionFlag").val("invali");
return;
}
// 减 1 秒
t = t - 1000;
if(t <= 0) {
t = 0;
}
// 设置隐藏域的值
$('#remainTime').val(t);
}
/**
* 倒计时主函数,fun调用函数,druition间隔时间
*/
function countMainFunction(fun,durition){
interId = setInterval(fun,durition);
}
// 倒计时入口函数
function gate(){
if($("#sessionFlag").val() === "invali"){
alert("验证码已过期,请重新获取");
return;
} else { // 没有过期则校验
//if()
alert("校验");
}
}
</script>
</head>
<body>
输入毫秒数:<input type="text" name="remainTime" id="remainTime" value="10000" />
<input type="button" id="startButton" value="提交" οnclick="gate();" />
<input type="button" id="endButton" value="重新发送验证码" οnclick="resendCode();" />
<input type="text" id="valiCode" />
<input type="text" id="sessionFlag" />
<br />
<div id="countdownDiv">
<span><span id="daySpanId"></span>天</span>
<span><span id="hourSpanId"></span>时</span>
<span><span id="minuteSpanId"></span>分</span>
<span><span id="secondSpanId"></span>秒</span>
</div>
</body>
<script type="text/javascript">
countMainFunction("countdown()",10000);
</script>
</html>
这是还没有去掉测试部分的代码
一部分是从网上的来的代码,做了一些修改。原理就是进入页面就调用js函数,开始倒数,当点击提交的时候判断是否倒数完成,如果完成,就会提示需要重新发送。
在真正使用的时候,remainTime控件改为hidden,valiCode可以用java等从后台获取,sessionFlag用来记录是否已经倒计时完成.