js设置按钮一段时间内不能重复点击的实现
2011-04-20 14:37
211 查看
下面是我在工作中遇到的一个问题,也成功的解决了,贴出来分享下,希望大家提出宝贵的建议。
问题提出:
为了防止传真发送接口的堵塞,程序要求传真发送按钮每过5分钟才能点击一次。即使关闭当前页面甚至浏览器,再重新打开,仍然能够判断,并做出读秒倒计时提示。
效果图:
问题解决:
首先,我们写个按钮状态更新的js函数
然后,我们再每次单击按钮时执行这样一段js代码
显然,这里我们用到了setTimeout函数。
OK,其实到了这里,已经实现了灰掉按钮并倒计时读秒效果。
但是,当关闭当前页面或浏览器重新打开时,失效了。因此,下面需要对操作按钮的时间设置一个cookie,然后每当打开这个页面时取出这个值,并与当前时间比较,做出相应。
下面就是实现代码:
OK,这样就可以了。欢迎大家提出宝贵意见。
问题提出:
为了防止传真发送接口的堵塞,程序要求传真发送按钮每过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,这样就可以了。欢迎大家提出宝贵意见。
相关文章推荐
- js实现60秒内不能重复点击按钮
- JS实现文本框的值输入不合规范的时候,点击按钮不能提交
- js 实现标题栏的向左向左滚动,设置两个向左和向右的两个按钮,当点击向左按钮时,标题栏文字向左滚动,点击向右按钮时,标题栏向右滚动。
- js实现点击按钮后给Div图层设置随机背景颜色的方法
- js实现点击按钮后给Div图层设置随机背景颜色的方法
- 防止按钮重复点击的js实现
- 使用js使某个按钮在5秒内不能重复点击
- js 实现防止按钮被多次点击
- js解决列表中按钮重复点击重复提交的问题
- JS实现点击按钮,下载文件
- ViewPager 滑动速度设置,并实现点击按钮滑动
- 利用5个标签,4个文本框,2个按钮,自己设计布局实现输入三边求三角形面积。界面如下所示。三角形类的编写可以使用实验4中已经写过的三角形类,当点击“判断三边”时,若能构成三角形,在标签5上显示“可以构成三角形!”,如不能构成三角形,在标签5上显示“不能构成三
- js实现点击按钮复制文本框中的内容
- js实现点击按钮变换背景颜色
- JS实现点击按钮后框架内载入不同网页的方法
- 基于JS+Canves实现点击按钮水波纹效果
- easyUI动态设置显示隐藏折叠按钮(在JS中实现)
- js---点击radio按钮实现图片轮换(two methds)
- js实现点击按钮复制文本框中的内容
- JavaScript实现点击按钮后变灰避免多次重复提交