欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

layui中的验证码倒计时操作按钮的改造与实现

最编程 2024-02-22 20:14:59
...
<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>

推荐阅读