获取验证码倒计时案例

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

YanLingGe

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

阅读量663

点赞数 2

CC 4.0 BY-SA版权

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/YanLingGe/article/details/121665935

本文介绍了一种实现前端获取验证码并显示倒计时的方法。当用户点击“获取验证码”按钮后，按钮文字会变为“验证码已发送，请59秒后重试”，并启动1分钟倒计时。倒计时结束后，按钮恢复原样并可重新获取验证码。该功能通过JavaScript实现，包括按钮状态的控制、定时器更新内容和防止重复点击等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：点击“获取验证码后”，变为“验证码已发送，请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>