获取验证码倒计时案例

最新推荐文章于 2022-08-23 14:26:00 发布

YanLingGe

最新推荐文章于 2022-08-23 14:26:00 发布

阅读量625

点赞数 2

文章标签：前端开发验证码倒计时 JavaScript 按钮控制

本文链接：https://blog.youkuaiyun.com/YanLingGe/article/details/121665935

版权

要求：点击“获取验证码后”，变为“验证码已发送，请59秒后重试”，并且1分钟倒计时后恢复原样并能重新获取

思路：1.一个获取验证码的按钮，点击后更换内容

2.利用字符串拼接，多少秒是个变量，初始值60，利用计时器每秒减一实现

3.为防止再次点击重新开始计时，在点击后禁用按钮，这个通过判断按钮的状态来实现

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取验证码</title>
</head>
<body>
    <button>获取验证码</button>
</body>
</html>
<script>
    var num = 60
    document.querySelector("button").onclick = function(){
      var timer = setInterval(function(){
            document.querySelector("button").disabled = true
            num--;
            document.querySelector("button").innerHTML = "发送成功，请在"+num+"s后重试";
            if(num<=0){
            clearInterval(timer)
            document.querySelector("button").disabled = false
            document.querySelector("button").innerHTML = "重新发送";
        }
      },1000)
    }
</script>