js发送短信倒计时的简单实现

最新推荐文章于 2023-12-06 14:44:01 发布

poptxz

最新推荐文章于 2023-12-06 14:44:01 发布

阅读量811

点赞数

分类专栏： Javascript基础

本文链接：https://blog.csdn.net/poptxz/article/details/53054826

版权

Javascript基础专栏收录该内容

22 篇文章 0 订阅

订阅专栏

 
      <!DOCTYPE html PUBLIC  
      "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
      > 
     

 
      <html xmlns= 
      "http://www.w3.org/1999/xhtml" 
      > 
     

 
      <meta charset= 
      "utf-8" 
      > 
     

 
      <head> 
     

 
      <script src= 
      "jquery-2.1.4.min.js" 
       type= 
      "text/javascript" 
      ></script> 
     

 
      <script type= 
      "text/javascript" 
      > 
     

 
      var 
       InterValObj;  
      //timer变量，控制时间 
     

 
      var 
       count = 120;  
      //间隔函数，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> 
     