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. 基于stm32+esp8266通过阿里云物联网平台和MQTT实现智慧粮仓环境监测管理系统

    基于STM32+ESP8266通过阿里云物联网平台和MQTT实现智慧粮仓环境监测管理系统 技术要点:STM32f407.ESP8266.阿里云物联网平台IOT.MQTT.JSON数据解析. 1.功能与 ...

  2. Golang 实现本地持久化缓存

    // Copyright (c) 2024 LiuShuKu // Project Name : balance // Author : liushuku@yeah.net package cache ...

  3. gdfs: 基于Fuse的GoogleDrive客户端开源代码分析

    背景 在学习fuse的过程中,首先从libfuse中的demo开始学习,以了解用户态与内核态通信的框架.而此处的demo只聚焦于最基本的通信,用户态文件系统的实现只是一个最简单的read only文件 ...

  4. Postman 接口测试工具详解

    一.引言 在软件开发和测试过程中,接口测试是至关重要的环节.Postman 作为一款功能强大的接口测试工具,为开发者和测试人员提供了便捷高效的测试解决方案. 二.Postman 简介 Postman ...

  5. ZLMediaKit: 快速入门

    目录 ZLMediaKit是什么 编译 安装依赖库 构建项目 问题处理 问题1: srtp 未找到, WebRTC 相关功能打开失败 问题2:依赖库问题 安装 配置和运行 问题处理 问题1: 无权限监 ...

  6. mac 触控板 三指拖动

    1. 打开系统偏好设置 点击屏幕左上角的苹果图标(),选择"系统设置". 2. 打开指针控制 在系统偏好设置窗口左侧栏中,点击"辅助功能",然后在右侧列表中, ...

  7. docker配置Nvidia环境,使用GPU

    前言 需要 nvdia driver 安装好,请参考 Ubuntu Nvidia driver驱动安装及卸载 docker 安装 配置 apt 阿里云的镜像源 sudo curl -fsSL http ...

  8. mysql frm、MYD、MYI数据文件恢复,导入MySQL中

    前言 .frm..MYI..MYD 文件分别是 MySQL 的 MyISAM存储引擎存储的表结构.索引.数据文件. 简单方法恢复数据 .frm..MYI..MYD文件如果直接以文本打开,全部会以二进制 ...

  9. IM服务器:一个使用imserver服务器进行聊天的web端案例

    该案例中包含一个基于web网页的前端程序,该案例会使用websocket与IM服务器(imserver)进行通信. 一.环境准备 1.下载 "imserver网页调用案例",并解压 ...

  10. 【Maven】在 Idea 中使用 Maven

    在 Idea 中使用 Maven 1 在 Idea 中配置 Maven Idea 中也自带 Maven 插件,而且我们也可以给自带的 Maven 插件进行配置,所以我们可以使用自带的 Maven,也可 ...