利用原生Js方法实现发送验证码倒计时

最新推荐文章于 2024-05-13 08:00:00 发布

鬼畜的稀饭

最新推荐文章于 2024-05-13 08:00:00 发布

阅读量746

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq12547345/article/details/50220557

版权

查看演示效果

主要是利用window.setInterval(countTime, 1000); 方法 ,该方法是每隔一定时间,执行一次某方法.

第一个参数是要执行的方法名称, 不带小括号() ,第二个参数是毫秒为单位的执行间隔时间. 1000毫秒 = 1秒

<!DOCTYPE html>
<html>
    <body style="color:white">
        填写手机号:
        <input id="code" type="text">
        <button type="button" id="btn" onclick="sendCode()" >发送验证码</button>
        <script>
            var count; // 计数变量
            var timer; // 计时器变量,用于停止重复执行方法
            function sendCode(){
                count = 10 ; // 每次发送验证码 , 设定倒计时10秒
                document.getElementById("code").disabled = true; // 禁用输入框
                document.getElementById("btn").disabled = true; // 禁用按钮
                timer = window.setInterval(countTime, 1000); // 设定每隔一秒执行一次计时
            }

            function countTime(){
                count = count - 1; // 每次倒计时减1秒
                if(count>0){ // 大于0则继续执行
                    document.getElementById("btn").innerHTML = count+"秒后重新发送" ;
                }
                else{ // 计时到0则停止
                    window.clearInterval(timer); // 清除重复操作
                    document.getElementById("btn").innerHTML = "发送验证码";
                    document.getElementById("code").disabled = false;
                    document.getElementById("btn").disabled = false;
                }
            }
        </script>
    </body>
</html>