zoukankan      html  css  js  c++  java
  • 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; 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>
    你所拥抱的并不总是拥抱你
  • 相关阅读:
    VB.NET 操作Json 包括嵌套的
    c#和VB混用出现的错误
    System.ArgumentException: 另一个SqlParameterCollection中已包含SqlParameter。
    centos vsftpd 安装配置
    linux centos apache+php+mysql 安装( 用包安装 非yum 安装)
    迟到的一笔 php 5 apache 2.2 webservice 创建与配置
    linux centos apache+php+mysql 安装
    php 不能连接数据库 php error Can't connect to local MySQL server through socket '/tmp/mysql.sock'
    内置过渡动画
    Input 输入框
  • 原文地址:https://www.cnblogs.com/java-h/p/14414683.html
Copyright © 2011-2022 走看看