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>
