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

这篇具有很好参考价值的文章主要介绍了html web前端，点击发送验证码，按钮60秒倒计时。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

html web前端，点击发送验证码，按钮60秒倒计时,html5 之混合开发,html,html5

eaca39b57a49d39f6c9e2f49f2559e9a.jpg文章来源地址https://www.toymoban.com/news/detail-720969.html

<!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>

到了这里，关于html web前端，点击发送验证码，按钮60秒倒计时的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！