前端 簡訊 倒計時按鈕
阿新 • • 發佈：2018-12-17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></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秒執行一次 //請求後臺傳送驗證碼 TODO } //timer處理函式 function SetRemainTime() { if (curCount == 0) { window.clearInterval(InterValObj);//停止計時器 $("#btnSendCode").removeAttr("disabled");//啟用按鈕 $("#btnSendCode").val("重新發送驗證碼"); } else { curCount--; $("#btnSendCode").val(curCount + "秒後可重新發送"); } } </script> <body> <form action="/upload" method="POST" enctype="multipart/form-data"> 檔案：<input type="file" name="file"/> <input type="submit" value="提交"/> </form> <p><input id="btnSendCode" type="button" value="傳送驗證碼" onclick="sendMessage()" /></p> </body> </html>