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. 使用XManager远程连接服务器的时候使用Qt键盘会错位偏移

    问题 最近使用XManager访问服务器的xfce桌面,在使用Qt查看代码的时候发现键盘会错位 如下图,我输入application,最终显示这个 这样子就根本无法进行开发了 然后在网上找,发现有人出 ...

  2. 【软件开发】Doxygen使用笔记

    [软件开发]Doxygen 使用笔记 Doxygen 是通过代码注释生成文档的事实标准,借用该工具可以将文档内容与代码写在一起方便维护. https://github.com/doxygen/doxy ...

  3. FineReport - [01] 概述

    Gartner报表平台全球市场唯一入选国产软件! 一.FineReport 是什么?有什么用途? FineReport 是一款企业级Web报表工具,由帆软自主研发,秉持零编码的理念,易学易用且功能强大 ...

  4. 记vue修改数组属性,dom不发生变化的问题

    目录: 目录 目录: 开篇 正确的姿势 为什么 $set 开篇 今天在写vue的时候,出现了一个以前可能没遇到的问题.我利用一个数组记录列表下按钮的启用.禁用状态,但我点击某个列表项按钮后,会修改当前 ...

  5. 朝花夕拾,帮三年前的自己改bug

    三年前,滨海之边马上毕业的老少年 经过几天半死不活的思考之后决定干前端 那个时候为了面试各种css属性js API背的是滚瓜烂熟 然后投简历,企业要项目经验, 我没有工作我哪来的项目经验啊 没人会管你 ...

  6. libvirt和qga的区别?

    本文分享自天翼云开发者社区<libvirt和qga的区别?>,作者:乐道 Libvirt是一个开源项目,提供了一组API.工具.库,用于管理和控制虚拟化平台. 在Openstack环境中, ...

  7. Visio绘制时间轴安排图的方法

      本文介绍基于Visio软件绘制时间轴.日程安排图.时间进度图等的方法.   在很多学习.工作场合中,我们往往需要绘制如下所示的一些带有具体时间进度的日程安排.工作流程.项目进展等可视化图表.    ...

  8. goframe API 自定义接口返回值处理

    前言 goframe 默认使用了中间键 ghttp.MiddlewareHandlerResponse, HTTP Server 的数据返回通过 ghttp.Response 对象实现,ghttp.R ...

  9. Windows下Cmake+VS2017+OpenSceneGraph环境搭建及采坑

    一.资料准备 1.OSG源码官网下载地址:http://www.openscenegraph.org/index.php/download-section/stable-releases或者OSGCh ...

  10. Linux 实现OpenSSL 服务器端客户端通信

    1.OpenSSL安装 详情参考博文:https://blog.csdn.net/qq_39521181/article/details/96457673 2.SSL 在学习openssl编程之前,先 ...