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

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

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

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

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);

}

}

效果演示按钮:

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值