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

系统管理员 2024-02-21 11:07 4阅读 0赞

![format_png][]

d3fed6739c40876ec865f17150fd2106.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没有
                // XMLHttpRequest对象，而是用的ActiveXObject对象
                var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
                xhr.open("get", 'https://api.wzyanche.com/sms/SendSms/' + phoneDom.value, true);
                xhr.send(); //发送请求
    
                // 监听请求的状态
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        // 请求成功后的处理
                        console.log('111 111 返回的数据', xhr.responseText);
    
                        // 打印，获取json里的对象
                        var data2 = JSON.parse(xhr.responseText)
                        console.log('111 222 返回的数据', data2.retMsg);
                    }
                };
    
            }
        </script>
    
    </html>

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