html web前端，点击发送验证码，按钮60秒倒计时

比眉伴天荒 2024-02-21 11:06 50阅读 0赞

![format_png][]

eaca39b57a49d39f6c9e2f49f2559e9a.jpg

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title></title>
        </head>
        <body>
            <div>
    
                <div style="margin: 15px;">
                    <input id="phone" type="text" autocomplete="off" placeholder="请输入手机号" />
                    <input id="btnSendCode" type="button" value="获取验证码" onClick="sendMessage()" />
                </div>
    
            </div>
        </body>
        <script type="text/javascript">
            var phoneDom = document.querySelector('#phone');
    
            var btnSendCode = document.querySelector("#btnSendCode");
            var count = 60; // 间隔函数，1秒执行
            var InterVal; // timer变量，控制时间
    
            function SetTime() {
                if (curCount == 0) {
                    window.clearInterval(InterVal); //停止计时器
                    btnSendCode.removeAttribute("disabled"); //启用按钮
                    btnSendCode.value = "重新发送";
                } else {
                    curCount--;
                    btnSendCode.value = curCount + "秒再获取";
                }
            }
    
            function sendMessage() {
                // 
                // // 手机号码校验
                // var phone = (phoneDom.value).trim();
                // var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; //手机号正则
                // if (!phoneReg.test(phone)) {
                // alert(" 请输入有效的手机号码");
                // return false;
                // }
    
                // 
                // 按钮点击倒计时，限制点击
                curCount = count;
                //设置button效果，开始计时
                btnSendCode.setAttribute("disabled", "true");
                btnSendCode.value = curCount + "秒再获取";
                InterVal = window.setInterval(SetTime, 1000); //启动计时器，1秒执行一次
    
                // 
                //创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
                var request = new XMLHttpRequest();
                // 设置请求方法与路径
                request.open("get", 'https://api.wzyanche.com/sms/SendSms/' + phoneDom.value);
                // 不发送数据到服务器
                request.send(null);
                // XHR对象获取到返回信息后执行
                request.onload = function() {
                    // 解析获取到的数据
                    var data = JSON.parse(request.responseText);
                    console.log('111 000 返回的数据', data)
                    console.log('111 111 返回的数据', data.retMsg)
                }
            }
        </script>
    
    </html>

[format_png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/21/37830ad63dc647768142857d90c2123f.png