JavaScript实现10秒后再次获取验证码_JavaScript

JavaScript实现10秒后再次获取验证码

2021-12-01 16:38我是Dreamer啊 JavaScript

这篇文章主要为大家详细介绍了JavaScript实现10秒后再次获取验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

JavaScript网页制作–10秒后再次获取验证码，供大家参考，具体内容如下

通常在注册或者登陆页面时，都会需要短信验证码，在点击按钮获取验证码后会有一段时间无法点击按钮，避免短时间内大量的获取验证码。今天制作这样一个功能。

功能实现：

1、点击获取验证码后禁用按钮
2、按钮中的文字内容改变，每一秒都改变
3、按钮倒计时变为0时恢复按钮，改回文字，重置倒计时t

代码实现：

				?

									<!DOCTYPE html>

									<html lang="zh-CN">

									<head>

									  <meta charset="UTF-8">

									  <meta name="viewport" content="width=device-width, initial-scale=1.0">

									  <title>再次获取验证码</title>

									</head>

									<body>

									  <input type="text">

									  <button>获取验证码</button>

									  <script>

									    var btn = document.querySelector('button');

									    var t = 10;

									    //设置监听事件，按下按钮后禁用按钮

									    btn.addEventListener('click',function(){

									      btn.disabled = true;

									      //添加定时器，时间间隔为一秒

									      var time = setInterval(function(){

									        if(t==0){//如果倒计时等于0了，清除计时器，恢复按钮，将t重置为10，否则按钮中文字改变，t递减。

									          clearInterval(time);

									          btn.disabled=false;

									          btn.innerHTML='获取验证码';

									          t=10;

									        }else{

									        btn.innerHTML='您可以在'+t+'秒后再次获取';

									        t--;

									        }

									      }, 1000);

									    })

									  </script>

									</body>

									</html>