阿萌的程序小屋

萌物控重度患者与您一起畅游技术与梦想的世界

JavaScript实现点击按钮后变为不可点击状态,倒计时恢复点击

表单(form)、按钮(button)是网站中常用的部件之一,在某些情况下为了避免按钮多次被点击触发,我们经常在按钮点击之后变为不可点击状态,倒计时一段时间后恢复点击状态。

多次点击有时会造成结果不正确,增加服务器负担等情况,根据程序的情况,严重的甚至会引起服务器短时间崩溃,或者浏览器崩溃。这中简单的措施虽然防止不了恶意点击,但是能最低限度的防止了一些意外点击造成的不必要的问题。

下面放出一种比较简单的实现方式:


<input type="button" value="计算" onClick="time(this)"/>
<script type="text/javascript">
var times=6;
var wait=times;
function time(b) {
    if (wait == 0) {
        b.removeAttribute("disabled");
        b.value="计算";
        wait = times;
    } else {
        b.setAttribute("disabled", true);
        b.value=wait+"秒后可以重新计算";
        wait--;
        setTimeout(function(){time(b)},1000);
    }
}
</script> 

 

效果演示按钮: 

因为入坑不深,经验不足,如果各位大大有发现什么地方不妥,或者这段代码会在什么情况下出BUG的话,希望能够告知于我,一起探讨改进。Thanks~~~

如有朋友感觉我的博文或代码有问题,愿能给予我宝贵的意见!Thanks

另注:转载请随意,但请带上本文地址,万分感谢。

http://www.wangmengyu.cn/?p=373

这就是真的真的是传说中的公告牌的说~~
暂且努力发展中~~

性别:男  年龄:20岁
现居:江苏  南京  浦口区
标语:萌即是一切