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

jun_tong

于 2023-10-23 14:15:36 发布

阅读量465

点赞数 1

分类专栏： html5 之混合开发文章标签： html5 html

本文链接：https://blog.csdn.net/jun_tong/article/details/133989114

版权

html5 之混合开发专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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

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>