jQuery 實現 點擊按鈕后倒計時效果，多用于實現發送手機驗證碼、郵箱驗證碼

lidki 9年前發布 | 2K 次閱讀 JavaScript jQuery 

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


<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">



    /*-------------------------------------------*/
    var InterValObj; //timer變量，控制時間



var count = 5; //間隔函數，1秒執行
var curCount;//當前剩余秒數
var code = ""; //驗證碼
var codeLength = 6;//驗證碼長度
function sendMessage() {
            curCount = count;
            var dealType; //驗證方式
var uid=$("#uid").val();//用戶uid
if ($("#phone").attr("checked") == true) {
                dealType = "phone";
            }
            else {
                dealType = "email";
            }
            //產生驗證碼
for (var i = 0; i < codeLength; i++) {
                code += parseInt(Math.random() * 9).toString();
            }
            //設置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("重新發送驗證碼");
                code = ""; //清除驗證碼。如果不清除，過時間后，輸入收到的驗證碼依然有效

            }
            else {
                curCount--;
                $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");
            }
        }
    </script>
</head>
<body>
        <input id="btnSendCode" type="button" value="發送驗證碼" onclick="sendMessage()" /></p>
</body>
</html></pre>
 本文由用戶 lidki 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！