zoukankan      html  css  js  c++  java
  • 前端常用库-发送短信验证码倒计时60秒

    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>
  • 相关阅读:
    Java规约之方法设计
    JVM第一篇 JVM与Java体系结构
    初学者学习Java方法集
    初学者学习Java方法集
    1.Spring-Boot 静态文件和页默认放置位置
    2.Spring-Boot常用配置解释
    3.Spring-Boot核心@SpringBootApplication介绍
    4.Spring-Boot中基于Junit的单元测试
    vue学习笔记(一) ---- vue指令(v-for 和 key 属性)
    vue学习笔记(一) ----- vue指令(菜单列表案例)
  • 原文地址:https://www.cnblogs.com/Gabriel-Wei/p/6123869.html
Copyright © 2011-2022 走看看