js设置按钮倒计时

最新推荐文章于 2025-02-28 17:24:53 发布

转载最新推荐文章于 2025-02-28 17:24:53 发布 · 1.7k 阅读

js 专栏收录该内容

3 篇文章

订阅专栏

博主分享工作中解决传真发送接口堵塞问题的经验。程序要求传真发送按钮每5分钟才能点击一次，关闭页面再打开仍能倒计时提示。通过编写按钮状态更新的js函数和单击按钮执行的js代码实现基本功能，再用cookie记录操作时间，解决页面关闭重开失效问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

问题提出：

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

效果图：

问题解决：

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

复制代码

然后，我们再每次单击按钮时执行这样一段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';
}
}