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

23 篇文章 0 订阅
7 篇文章 1 订阅

一、上代码:

<div class="layui-form-item">
                <!--<label class="layui-form-label">输入框</label>-->
                <label class="layui-icon layui-icon-vercode layui-form-label formslabel" ></label>
                <!--<div class="layui-input-block formsinput">-->
                  <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>-->
                <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 = 3; //间隔函数,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>

三、记得点个赞再走哦

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值