• jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码

    [html] view plain copy 在CODE上查看代码片派生到我的代码片
      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      2. <html xmlns="http://www.w3.org/1999/xhtml">  
      3. <head>  
      4. <script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>  
      5. <script type="text/javascript">  
      6.   
      7.   
      8. var InterValObj; //timer变量，控制时间  
      9. var count = 5; //间隔函数，1秒执行  
      10. var curCount;//当前剩余秒数  
      11.   
      12.   
      13. function sendMessage() {  
      14.   　curCount = count;  
      15. 　　//设置button效果，开始计时  
      16.      $("#btnSendCode").attr("disabled", "true");  
      17.      $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
      18.      InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次  
      19. 　　  //向后台发送处理数据  
      20.      $.ajax({  
      21.      　　type: "POST", //用POST方式传输  
      22.      　　dataType: "text", //数据格式:JSON  
      23.      　　url: 'Login.ashx', //目标地址  
      24.     　　 data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,  
      25.     　　 error: function (XMLHttpRequest, textStatus, errorThrown) { },  
      26.      　　success: function (msg){ }  
      27.      });  
      28. }  
      29.   
      30.   
      31. //timer处理函数  
      32. function SetRemainTime() {  
      33.             if (curCount == 0) {                  
      34.                 window.clearInterval(InterValObj);//停止计时器  
      35.                 $("#btnSendCode").removeAttr("disabled");//启用按钮  
      36.                 $("#btnSendCode").val("重新发送验证码");  
      37.             }  
      38.             else {  
      39.                 curCount--;  
      40.                 $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
      41.             }  
      42.         }  
      43. </script>  
      44. </head>  
      45. <body>  
      46.         <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>  
      47. </body>  
      48. </html> 
  • 相关阅读:
    为什么选择 Yeoman 及 Yeoman 的安装
    NPOI高效匯出Excel
    CentOS7 MongoDB安裝
    打印函数调用堆栈
    libevent源码分析：eventop
    libevent源码分析：time-test例子
    libevent源码分析：event_assign、event_new
    libevent源码分析：bufferevent
    lievent源码分析：evbuffer
    epoll实现压测工具
  • 原文地址：https://www.cnblogs.com/huangyin1213/p/5552670.html
Copyright © 2020-2023  润新知