zoukankan      html  css  js  c++  java

  • 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> 
  • 相关阅读:
    ISpout源码解析
    storm完全分布式部署
    sqoop工具
    sqoop安装步骤
    HBASE常用配置
    linux命令无法使用：命令行输入：set>lll cat lll echo $PATH
    BubbleSort
    QuickSortWithRec
    面试题
    Nginx配置安装
  • 原文地址：https://www.cnblogs.com/huangyin1213/p/5552670.html
Copyright © 2011-2022 走看看