jQuery实现发送验证码控制按钮禁用

2022-06-21 09:55:51

需求效果：点击发送验证码之后，按钮禁用，5秒之后取消禁用。
效果图如下：
在这里插入图片描述
点击发送之后禁用按钮
在这里插入图片描述
5秒之后取消禁用，重新发送
在这里插入图片描述
代码如下：

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><inputtype="text"><inputtype="button"value="发送"><scriptsrc="js/jquery-1.12.4.min.js"></script><script>// 获取元素var $btn=$("input:button")// 添加按钮的点击事件
    $btn.click(function(){// 定义一个变量存储时间的数字var n=5;// 让按钮被禁用// 替换按钮的文字内容$(this).prop("disabled",true).val(n+"s 后重新发送")// 每隔 1s 更改倒计时内容// 通过定时器进行每隔 1s 减时间效果var timer=setInterval(()=>{
        n--;// 文字内容发生变化// 定时器内部的this指向的默认为 window$(this).val(n+"s 后重新发送")// 判断如果时间到了 0 ，就要停止定时器if(n<=0){clearInterval(timer)// 5s 结束后，需要让文字恢复 发送// 让按钮取消禁用$(this).val("重新发送").prop("disabled",false)}},1000)})</script></body></html>
  • 作者：野草闲花逢春生
  • 原文链接：https://blog.csdn.net/qq_42918876/article/details/119003047
    更新时间：2022-06-21 09:55:51