下面是我在工作中遇到的一个问题,也成功的解决了,贴出来分享下,希望大家提出宝贵的建议。
问题提出:
为了防止传真发送接口的堵塞,程序要求传真发送按钮每过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';
}
}