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

最新推荐文章于 2024-02-07 17:14:57 发布

jun_tong

最新推荐文章于 2024-02-07 17:14:57 发布

阅读量654

点赞数

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

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

版权

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

35 篇文章 1 订阅

订阅专栏

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

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>