js设置按钮倒计时

下面是我在工作中遇到的一个问题，也成功的解决了，贴出来分享下，希望大家提出宝贵的建议。

问题提出：

为了防止传真发送接口的堵塞，程序要求传真发送按钮每过5分钟才能点击一次。即使关闭当前页面甚至浏览器，再重新打开，仍然能够判断，并做出读秒倒计时提示。

效果图：

问题解决：

首先，我们写个按钮状态更新的js函数

 

function update(num) {
var secs = 60 * 5;
if (num == secs) {
$("#btnResendFax").val("发送传真");
$("#btnResendFax").attr("disabled", false);
}
else {
printnr = secs - num;
$("#btnResendFax").val("发送中，距离下次操作还剩" + printnr + "秒");
$("#btnResendFax").attr("disabled", true);
}
}

然后，我们再每次单击按钮时执行这样一段js代码

for (i = 1; i <= 60 * 5; i++) {
window.setTimeout("update( " + i + ") ", i * 1000);
}

显然，这里我们用到了setTimeout函数。

OK，其实到了这里，已经实现了灰掉按钮并倒计时读秒效果。

但是，当关闭当前页面或浏览器重新打开时，失效了。因此，下面需要对操作按钮的时间设置一个cookie，然后每当打开这个页面时取出这个值，并与当前时间比较，做出相应。

下面就是实现代码：

 

//页面加载时判断传真发送按钮5分钟倒计时是否已到
$(document).ready(function () {
var date = new Date();
var msNow = date.getTime();
var msBefore = getCookie("btnResendFaxTime");
if (msBefore != null) {
var msMul = msBefore - msNow;
if (msMul > 0) {
for (var i = 1, j = parseInt(300 - msMul / 1000); j <= 60 * 5; i++, j++) {
window.setTimeout("update( " + j + ") ", i * 1000);
}
}
}
});
//获取cookie
function getCookie(name) {
var prefix = name + "="
var start = document.cookie.indexOf(prefix)
if (start == -1) {
return null;
}
var end = document.cookie.indexOf(";", start + prefix.length)
if (end == -1) {
end = document.cookie.length;
}
var value = document.cookie.substring(start + prefix.length, end)
return unescape(value);
}
//设置cookie
function setCookie(){
if (!navigator.cookieEnabled) {
alert('不Cookie项!');
}
else {
var date = new Date();
date.setTime(date.getTime() + 60000 * 5);//5分钟过期
document.cookie = 'btnResendFaxTime=' + escape(date.getTime()) +
';expires=' + date.toGMTString() + ';path=/' + ';domaim=null' + ':secure';
}
}

 

OK，这样就可以了。欢迎大家提出宝贵意见。