• 前端常用库-发送短信验证码倒计时60秒


    前端常用库-发送短信验证码倒计时60秒

            </h1>
            <div class="clear"></div>
            <div class="postBody">
    
    1. 带ajax验证
      原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html
      复制代码
      <!doctype html>
      <head>
      <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript">
      

      var InterValObj; //timer变量,控制时间
      var count = 60; //间隔函数,1秒执行
      var curCount;//当前剩余秒数

      function sendMessage() {
       curCount
      = count;
        
      //设置button效果,开始计时
      $("#btnSendCode").attr("disabled", "true");
      $(
      "#btnSendCode").val("请在" + curCount + "秒内输入验证码");
      InterValObj
      = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
         //向后台发送处理数据
      $.ajax({
        type:
      "POST", //用POST方式传输
        dataType: "text", //数据格式:JSON
        url: 'Login.ashx', //目标地址
         data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
         error:
      function (XMLHttpRequest, textStatus, errorThrown) { },
        success:
      function (msg){ }
      });
      }

      //timer处理函数
      function SetRemainTime() {
      if (curCount == 0) {
      window.clearInterval(InterValObj);
      //停止计时器
      $("#btnSendCode").removeAttr("disabled");//启用按钮
      $("#btnSendCode").val("重新发送验证码");
      }
      else {
      curCount
      --;
      $(
      "#btnSendCode").val("请在" + curCount + "秒内输入验证码");
      }
      }
      </script>
      </head>
      <body>
      <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>
      </body>
      </html>

      复制代码



    2. 不带ajax
      复制代码
      <!DOCTYPE html>
      <html>
      <head>
      <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript"> 
      var countdown=60; 
      function settime(obj) { 
          if (countdown == 0) { 
              obj.removeAttribute("disabled");    
              obj.value="免费获取验证码"; 
              countdown = 60; 
              return;
          } else { 
              obj.setAttribute("disabled", true); 
              obj.value="重新发送(" + countdown + ")"; 
              countdown--; 
          } 
      setTimeout(function() { 
          settime(obj) }
          ,1000) 
      }
      

      </script>
      <body>
      <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />

      </body>
      </html>

      复制代码
    这是我自己学习,工作做的笔记和总结,只是做个记录,没事的时候翻翻!有问题大家可以提出来,一起探讨,共同进步。如有转载,请注明出处。

  • 相关阅读:
    好玩的spring boot banner 图
    数据结构和算法二(数组)
    数据结构与算法三(链表)
    数据结构和算法一(基础知识)
    jenkins 部署node应用
    Docker-compose 安装Jenkins
    Docker 网络模式
    exe4j 转jar
    c#索引器的简单用法
    Adapter模式
  • 原文地址:https://www.cnblogs.com/whkzm/p/12219407.html
Copyright © 2020-2023  润新知