手机发送验证码

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="txt"> <button id="btn">点我获取验证码</button>

    <script>
        var btn = document.getElementById('btn');
        var num = 60;
        var timer = null;

        btn.onclick = function () {
            clearInterval(timer);  // 先清掉上次所有定时器  保证 按下按钮时 只开启当前定时器
            timer = setInterval(function () {
                num--;
                if (num < 0) {
                    num = 5;
                    btn.innerHTML = '点我获取验证码'
                    clearInterval(timer);
                    
                    btn.disabled = false;  // 恢复按钮点击状态
                    return false;
                    
                }
                btn.innerHTML = num + 's之后再获取';
                btn.disabled = true;   // 设置按钮禁止点击状态
            }, 1000)

        }
    </script>
</body>

</html>

 

效果

posted @ 2020-07-03 13:45  石海莹  阅读(148)  评论(0)  编辑  收藏  举报