_layui 前端短信验证码倒计时">
当前位置:   article > 正文

layui的验证码倒计时按钮变化功能,直接拿走就可以用_layui 前端短信验证码倒计时

layui 前端短信验证码倒计时

一、上代码:

  1. <div class="layui-form-item">
  2. <!--<label class="layui-form-label">输入框</label>-->
  3. <label class="layui-icon layui-icon-vercode layui-form-label formslabel" ></label>
  4. <!--<div class="layui-input-block formsinput">-->
  5. <input type="text" name="mailcaptcha" required lay-verify="required" placeholder="邮箱验证码" autocomplete="off" class="layui-input formsinput " style="float: left;width: 54%;margin-right: 14px;">
  6. <!--</div>-->
  7. <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>
  8. </div>

二、js代码

  1. <script>
  2. var $ = layui.jquery,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
  3. var form = layui.form;
  4. var InterValObj; //timer变量,控制时间
  5. var count = 3; //间隔函数,1秒执行
  6. var curCount;//当前剩余秒数
  7. //发送验证码
  8. function mail(){
  9. curCount = count;
  10. var email = $('#email').val();
  11. layer.msg('请稍后');
  12. document.getElementById("btnSendCode").setAttribute("disabled","true" );//设置按钮为禁用状态
  13. $('#btnSendCode').addClass('layui-btn-disabled');
  14. $('#btnSendCode').text(curCount + "秒后重获");
  15. InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数,1秒执行一次
  16. $.ajax({
  17. url:"",
  18. data:{},
  19. type:"Post",
  20. dataType:"json",
  21. success:function(data){
  22. },
  23. error:function(data){
  24. $.messager.alert('错误',data.msg);
  25. }
  26. });
  27. }
  28. //timer处理函数
  29. function SetRemainTime(){
  30. if(curCount == 0){
  31. $('#btnSendCode').removeClass('layui-btn-disabled');
  32. $('#btnSendCode').text("重获验证码");
  33. window.clearInterval(InterValObj);// 停止计时器
  34. document.getElementById("btnSendCode").removeAttribute("disabled");//移除禁用状态改为可用
  35. } else{
  36. curCount--;
  37. $('#btnSendCode').text(curCount + "秒后重获");
  38. }
  39. }
  40. </script>

三、记得点个赞再走哦

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/495306
推荐阅读
相关标签
  

闽ICP备14008679号