• 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>
  • 相关阅读:
    【智能优化算法-灰狼算法】基于狩猎 (DLH) 搜索策略的灰狼算法求解单目标优化问题附matlab代码
    基于springboot+vue的信息技术知识赛系统
    java“贪吃蛇”小游戏
    nginx配置反向代理和动静分离应用
    如何让CI/CD同一个阶段的任务先后执行而不是同时执行
    idea git提交代码
    实现过滤词汇高亮
    【每日一好题】这么经典的题你不能不会：矩阵置零
    聊聊logback的MDCFilter
    基于ElasticSearch+Vue实现简易搜索
  • 原文地址：https://blog.csdn.net/jun_tong/article/details/133989073