欢迎光临
我的个人博客网站

JavaScript实现获取验证码倒计时效果


要求:

点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信
JavaScript实现获取验证码倒计时效果

实现思路:

  1. 按钮点击之后,禁用disabledtrue
  2. 同时按钮里面的内容会变化,button里面的内容通过innerHTML修改
  3. 里面秒数是有变化的,因此需要用到定时器
  4. 定义一个变量,在定时器里面,不断递减
  5. 如果变量为0说明时间到了,需要停止定时器,重新恢复变量,并且复原按钮初始状态

代码实现:

<body></body>内容:

手机号码: <input type="text"> <button>发送</button> <script>     // 按钮点击之后,会禁用 disabled 为true      // 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改     // 里面秒数是有变化的,因此需要用到定时器     // 定义一个变量,在定时器里面,不断递减     // 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态     var btn = document.querySelector('button');     var time = 3; // 定义剩下的秒数     btn.addEventListener('click', function() {         btn.disabled = true;         var timer = setInterval(function() {             if (time == 0) {                 // 清除定时器和复原按钮                 clearInterval(timer);                 btn.disabled = false;                 btn.innerHTML = '发送';                 time = 3; // 重新赋值时间变量             } else {                 btn.innerHTML = time + '秒后可再次发送';                 time--;             }         }, 1000);     }); </script> 

实现效果:

点击发送之后,按钮禁用,并出现倒计时。设置为3秒倒计时。
JavaScript实现获取验证码倒计时效果


3秒过后,按钮复原,可以重新点击发送
JavaScript实现获取验证码倒计时效果

赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript实现获取验证码倒计时效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏