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

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

    eaca39b57a49d39f6c9e2f49f2559e9a.jpg

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5.         <title></title>
    6.     </head>
    7.     <body>
    8.         <div>
    9.  
    10.             <div style="margin: 15px;">
    11.                 <input id="phone" type="text" autocomplete="off" placeholder="请输入手机号" />
    12.                 <input id="btnSendCode" type="button" value="获取验证码" onClick="sendMessage()" />
    13.             </div>
    14.  
    15.         </div>
    16.     </body>
    17.     <script type="text/javascript">
    18.         var phoneDom = document.querySelector('#phone');
    19.  
    20.         var btnSendCode = document.querySelector("#btnSendCode");
    21.         var count = 60; // 间隔函数，1秒执行
    22.         var InterVal; // timer变量，控制时间
    23.  
    24.         function SetTime() {
    25.             if (curCount == 0) {
    26.                 window.clearInterval(InterVal); //停止计时器
    27.                 btnSendCode.removeAttribute("disabled"); //启用按钮
    28.                 btnSendCode.value = "重新发送";
    29.             } else {
    30.                 curCount--;
    31.                 btnSendCode.value = curCount + "秒再获取";
    32.             }
    33.         }
    34.  
    35.         function sendMessage() {
    36.             // 
    37.             // // 手机号码校验
    38.             // var phone = (phoneDom.value).trim();
    39.             // var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; //手机号正则
    40.             // if (!phoneReg.test(phone)) {
    41.             // alert(" 请输入有效的手机号码");
    42.             // return false;
    43.             // }
    44.  
    45.             // 
    46.             // 按钮点击倒计时，限制点击
    47.             curCount = count;
    48.             //设置button效果，开始计时
    49.             btnSendCode.setAttribute("disabled", "true");
    50.             btnSendCode.value = curCount + "秒再获取";
    51.             InterVal = window.setInterval(SetTime, 1000); //启动计时器，1秒执行一次
    52.  
    53.             // 
    54.             //创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
    55.             var request = new XMLHttpRequest();
    56.             // 设置请求方法与路径
    57.             request.open("get", 'https://api.wzyanche.com/sms/SendSms/' + phoneDom.value);
    58.             // 不发送数据到服务器
    59.             request.send(null);
    60.             // XHR对象获取到返回信息后执行
    61.             request.onload = function() {
    62.                 // 解析获取到的数据
    63.                 var data = JSON.parse(request.responseText);
    64.                 console.log('111 000 返回的数据', data)
    65.                 console.log('111 111 返回的数据', data.retMsg)
    66.             }
    67.         }
    68.     </script>
    69.  
    70. </html>
  • 相关阅读:
    基于EasyX的贪吃蛇小游戏 - C语言
    【开源】JAVA+Vue.js实现高校学生管理系统
    LeetCode算法栈—验证图书取出顺序
    2022年申请牛剑入学的IB学霸们的成绩多高？
    PCM编码格式
    java jvm用到的各种工具
    自然语言生成技术现状调查：核心任务、应用和评估（3）
    基于SSM的景点管理系统
    运行软件找不到mfc140u.dll怎么解决，mfc140u.dll是什么文件
    甘特图组件DHTMLX Gantt示例 - 如何有效管理团队工作时间？（二）
  • 原文地址：https://blog.csdn.net/jun_tong/article/details/133989073