jquery 實現 點選按鈕後倒數計時效果，多用於實現傳送手機驗證碼、郵箱驗證碼

taogchan發表於2014-01-10
jQuery

點選(此處)摺疊或開啟

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"\">

  3. <html xmlns=\"\">
  4. <head>
  5.     <title></title>
  6.     <script src=\"HTML/js/jquery-1.4.1.min.js\" type=\"text/javascript\"></script>
  7.     <script type=\"text/javascript\">

  9.         /*-------------------------------------------*/
  10.         var InterValObj; //timer變數，控制時間
  11. var count = 5; //間隔函式，1秒執行
  12. var curCount;//當前剩餘秒數
  13. var code = \"\"; //驗證碼
  14. var codeLength = 6;//驗證碼長度
  15. function sendMessage() {
  16.             curCount = count;
  17.             var dealType; //驗證方式
  18. var uid=$(\"#uid\").val();//使用者uid
  19. if ($(\"#phone\").attr(\"checked\") == true) {
  20.                 dealType = \"phone\";
  21.             }
  22.             else {
  23.                 dealType = \"email\";
  24.             }
  25.             //產生驗證碼
  26. for (var i = 0; i < codeLength; i++) {
  27.                 code += parseInt(Math.random() * 9).toString();
  28.             }
  29.             //設定button效果，開始計時
  30.                 $(\"#btnSendCode\").attr(\"disabled\", \"true\");
  31.                 $(\"#btnSendCode\").val(\"請在\" + curCount + \"秒內輸入驗證碼\");
  32.                 InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器，1秒執行一次
  33. //向後臺傳送處理資料
  34.                 $.ajax({
  35.                     type: \"POST\", //用POST方式傳輸
  36.                     dataType: \"text\", //資料格式:JSON
  37.                     url: \'Login.ashx\', //目標地址
  38.                     data: \"dealType=\" + dealType +\"&uid=\" + uid + \"&code=\" + code,
  39.                     error: function (XMLHttpRequest, textStatus, errorThrown) { },
  40.                     success: function (msg){ }
  41.                 });
  42.             }
  43.         //timer處理函式
  44. function SetRemainTime() {
  45.             if (curCount == 0) {
  46.                 window.clearInterval(InterValObj);//停止計時器
  47.                 $(\"#btnSendCode\").removeAttr(\"disabled\");//啟用按鈕
  48.                 $(\"#btnSendCode\").val(\"重新傳送驗證碼\");
  49.                 code = \"\"; //清除驗證碼。如果不清除，過時間後，輸入收到的驗證碼依然有效
  50.             }
  51.             else {
  52.                 curCount--;
  53.                 $(\"#btnSendCode\").val(\"請在\" + curCount + \"秒內輸入驗證碼\");
  54.             }
  55.         }
  56.     </script>
  57. </head>
  58. <body>
  59.         <input id=\"btnSendCode\" type=\"button\" value=\"傳送驗證碼\" onclick=\"sendMessage()\" /></p>
  60. </body>
  61. </html>

 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/22392018/viewspace-1069261/，如需轉載，請註明出處，否則將追究法律責任。

相關文章