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>

layui的验证码倒计时按钮的更多相关文章

  1. iOS 短信验证码倒计时按钮的实现

    验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...

  2. 前端学习——ionic/AngularJs——获取验证码倒计时按钮

     按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...

  3. Android中注册获取验证码倒计时按钮

    public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...

  4. js实现发送验证码倒计时按钮

    在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...

  5. android学习小例子——验证码倒计时按钮

    1.activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro ...

  6. jQuery 发送验证码倒计时按钮

    { wait:90, hsTime:function(that){ if (this.wait == 0) { $('#hsbtn').removeAttr("disabled") ...

  7. jQuery 发送验证码倒计时按钮 复制代码

    <!DOCTYPE html> <html> <head> <title></title> <script src="../ ...

  8. iOS-实现验证码倒计时功能(1)

    验证码倒计时按钮的应用是非常普遍的,该Blog就和你一起来写一个IDCountDownButton来实现验证码倒计时的效果.你可以想使用普通的UIButton类型按钮一样,只需要设置其倒计时时长(若未 ...

  9. jquery倒计时按钮常用于验证码倒计时

    <!doctype html><html><head> <meta charset="utf-8"> <title>jq ...

  10. js点击按钮获取验证码倒计时

    //发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...

随机推荐

  1. NFS服务器离线问题解决

    NFS服务器离线问题解决 NFS服务器挂了会导致挂载的NFS客户端主机卡顿延迟,或者提示找不到文件 因为在执行一些命令的时候会自动去同步,用作同步的NFS服务端挂了,命令执行就会卡住 不过听说NFS还 ...

  2. Shell - 脚本案例

    题记部分 一.节点状态监控脚本(nodeStatusCheck.sh) [脚本名称]nodeStatusCheck.sh [监控规则]通过ping的方式监控集群节点状态,检查节点是否失联 [实现方式] ...

  3. CentOS7搭建CDH5.16.2集群 HA高可用(包含Spark2等组件部署)

    CentOS7搭建CDH5.16.2集群 HA高可用   机器准备:(这里HA是对HDFS和YARN的高可用) 主机名 cpu内存 bigdata-master01 8c32G bigdata-mas ...

  4. MySQL数据库datetime类型不能为空值的问题

    修改mysql的配置文件:my.ini 将其只的: sql-mode="STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUT ...

  5. git上传大文件!git push 报错 ! [remote rejected] main -&gt; main (pre-receive hook declined) error_ failed to push some refs to &#39;xxx

    前言 今天在用git push项目的时候,出现了一个报错,记录一下解决方案,以后报同样的错误可以回来看. 错误信息 下面是git push的详细报错信息: 20866@DESKTOP-7R0VL04 ...

  6. Selenium KPI接口 时间等待

    常见的时间等待有三种: 固定.显示.隐士. 应用场景: 主要用于模拟真实的用户操作,有时时间过于短,页面响应不过来,从而造成元素定位不到. 使用格式: sleep(3):一般用于调试 implicit ...

  7. 修改npm下载地址为淘宝镜像

    修改 npm 下载地址 修改为国内淘宝镜像 # 修改为新淘宝镜像(推荐) npm config set registry https://registry.npmmirror.com/ # 旧 npm ...

  8. arco-design-pro-vite项目配置参考

    参考地址 配置源码地址:https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/ 按钮组件 ...

  9. vue学习一(指令1.v-text,v-html,插值表达式{{msg}})

    一.1.v-text,v-html,插值表达式{{msg}} 注:v-text解决差值表达式闪烁问题,因为他是属性不是差值表达式 1.1.v-text: 是没有闪烁问题的,会覆盖标签的元素中原本的内容 ...

  10. linux 查看jdk安装路径

    [root@iz2ze9ufq5ehrayz6j88saz bin]# java -version java version "1.8.0_191" Java(TM) SE Run ...