layui的驗證碼倒計時按鈕


HTML部分

    <div class="layui-form-item">
      <label class="layui-icon layui-icon-vercode layui-form-label formslabel" ></label>
         <input type="text" name="mailcaptcha"  required  lay-verify="required" placeholder="郵箱驗證碼" autocomplete="off" class="layui-input formsinput " style="float: left;width: 54%;margin-right: 14px;">
           <div class="layui-col-xs5"> 
           <div style="margin-left: 10px;">
             <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" onclick="mail()" name="btnSendCode" id="btnSendCode">獲取驗證碼</button>
           </div>
         </div> </div>

 

 

JS部分

    <script>
        var $ = layui.jquery,
            element = layui.element; //Tab的切換功能,切換事件監聽等,需要依賴element模塊
        var form = layui.form;

        var InterValObj; //timer變量,控制時間
        var count = 60; //間隔函數,1秒執行
        var curCount; //當前剩余秒數
        //發送驗證碼
        function mail() {
            curCount = count;
            var email = $('#email').val();
            layer.msg('請稍后');
            document.getElementById("btnSendCode").setAttribute("disabled", "true"); //設置按鈕為禁用狀態
            $('#btnSendCode').addClass('layui-btn-disabled');
            $('#btnSendCode').text(curCount + "秒后重獲");
            InterValObj = window.setInterval(SetRemainTime, 1000); // 啟動計時器timer處理函數,1秒執行一次
            $.ajax({
                url: "",
                data: {},
                type: "Post",
                dataType: "json",
                success: function(data) {

                },
                error: function(data) {
                    $.messager.alert('錯誤', data.msg);
                }
            });

        }

        //timer處理函數
        function SetRemainTime() {
            if(curCount == 0) {
                $('#btnSendCode').removeClass('layui-btn-disabled');
                $('#btnSendCode').text("重獲驗證碼");
                window.clearInterval(InterValObj); // 停止計時器
                document.getElementById("btnSendCode").removeAttribute("disabled"); //移除禁用狀態改為可用
            } else {
                curCount--;
                $('#btnSendCode').text(curCount + "秒后重獲");
            }
        }
    </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM