手机验证码倒计时的实现 | 手机验证码倒计时的实现,普通点击事件实现验证码倒计时,监听事件实现验证码倒计时

网站设计知识

手机验证码倒计时的实现

发布时间：2023-10-08

文章目录
手机验证码倒计时的实现
1.HTML代码
2.第一种方法实现
普通点击事件实现验证码倒计时
3.第二种方法实现
监听事件实现验证码倒计时
总结

手机验证码倒计时的实现
1.HTML代码

<head>
    <style>
        #btn {
            padding: 30px 50px;
        }
    </style>
</head>

<body>
    <!-- 在静态页面中写入一个button按钮 -->
    <button id="btn">获取手机验证码</button>
</body>

2.第一种方法实现
普通点击事件实现验证码倒计时

<script>
    // 普通点击事件实现验证码倒计时
    // 获取元素
    var btn = document.getElementById('btn')
    // 定义时间6秒
    var n = 6
    // 绑定点击事件
    btn.onclick = function () {
        // 定时器 ：setInterval (回调函数，时间间隔)
        var timer = setInterval(function () {
            // 时间递减
            n--
            // 获取验证码过程
            btn.innerHTML = '请耐心等待(' + n + ')'
            // 按钮禁用
            btn.disabled = true
            // 当时间减到0时，获取验证码失败，需要点击按钮重新发送
            if (n < 0) {
                btn.innerHTML = '重新发送'
                // 当时间减到0时，按钮禁用取消，可以点击按钮
                btn.disabled = false
                // 将时间重新定义到60秒，重新发送验证码
                n = 6
                // 在定时器完成一次后需要清除定时器，否则会一直执行该代码，影响下一次执行的代码
                clearInterval(timer)
            }
            // 1000 时间间隔，单位是毫秒
        } 1000)
    }
</script>

3.第二种方法实现
监听事件实现验证码倒计时

<script>
    // 监听事件实现验证码倒计时
    // 获取元素
    var btn = document.getElementById('btn')
    // 事件处理程序
    function countdown() {
        var n = 6;
        // 按钮禁用
        btn.disabled = true;
        // 定时器 ：setInterval (回调函数，时间间隔)
        var timer = setInterval(function () {
            btn.innerHTML = '请耐心等待(' + n + ')';
            n--;
            if (n < 0) {
                // 清除定时器
                clearInterval(timer);
                btn.innerHTML = '重新发送';
                // 按钮禁用取消
                btn.disabled = false;
            }
        } 1000);
    }
    // 添加监听事件  事件类型 点击:'click' 
    btn.addEventListener('click' countdown);
</script>

总结
监听事件的代码将定时器函数定义为独立的函数，增强代码的可读性和可维护性。当按钮被点击时，调用countdown函数开始倒计时，倒计时结束后重新启用按钮。同时，使用addEventListener方法代替了onclick属性，从而提高代码的可扩展性。

标签：手机验证码倒计时的实现 , 普通点击事件实现验证码倒计时 , 监听事件实现验证码倒计时 ,

上一篇 php5跟7有哪些区别

下一篇 PHP 微信公众号之客服完整讲解

返回列表