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;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的验证码倒计时按钮的更多相关文章
- iOS 短信验证码倒计时按钮的实现
验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器, ...
- 前端学习——ionic/AngularJs——获取验证码倒计时按钮
按钮功能为:点击"获取验证码"--按钮不可用-设置倒计时-60秒后重新获取. 代码借鉴于:http://plnkr.co/edit/Swj82MpJSix3a47jZRHP?p= ...
- Android中注册获取验证码倒计时按钮
public class CountDownTimerUtils extends CountDownTimer { private TextView mTextView; /** * @param t ...
- js实现发送验证码倒计时按钮
在写注册页面时,有时候需要发送注册邮件来获取验证码,但是为了防止多次重复发送邮件, 必须让按钮隔一段时间后才能再次使用. 代码如下: <html> <head> <met ...
- android学习小例子——验证码倒计时按钮
1.activity_main.xml: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro ...
- jQuery 发送验证码倒计时按钮
{ wait:90, hsTime:function(that){ if (this.wait == 0) { $('#hsbtn').removeAttr("disabled") ...
- jQuery 发送验证码倒计时按钮 复制代码
<!DOCTYPE html> <html> <head> <title></title> <script src="../ ...
- iOS-实现验证码倒计时功能(1)
验证码倒计时按钮的应用是非常普遍的,该Blog就和你一起来写一个IDCountDownButton来实现验证码倒计时的效果.你可以想使用普通的UIButton类型按钮一样,只需要设置其倒计时时长(若未 ...
- jquery倒计时按钮常用于验证码倒计时
<!doctype html><html><head> <meta charset="utf-8"> <title>jq ...
- js点击按钮获取验证码倒计时
//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...
随机推荐
- 使用XManager远程连接服务器的时候使用Qt键盘会错位偏移
问题 最近使用XManager访问服务器的xfce桌面,在使用Qt查看代码的时候发现键盘会错位 如下图,我输入application,最终显示这个 这样子就根本无法进行开发了 然后在网上找,发现有人出 ...
- 【软件开发】Doxygen使用笔记
[软件开发]Doxygen 使用笔记 Doxygen 是通过代码注释生成文档的事实标准,借用该工具可以将文档内容与代码写在一起方便维护. https://github.com/doxygen/doxy ...
- FineReport - [01] 概述
Gartner报表平台全球市场唯一入选国产软件! 一.FineReport 是什么?有什么用途? FineReport 是一款企业级Web报表工具,由帆软自主研发,秉持零编码的理念,易学易用且功能强大 ...
- 记vue修改数组属性,dom不发生变化的问题
目录: 目录 目录: 开篇 正确的姿势 为什么 $set 开篇 今天在写vue的时候,出现了一个以前可能没遇到的问题.我利用一个数组记录列表下按钮的启用.禁用状态,但我点击某个列表项按钮后,会修改当前 ...
- 朝花夕拾,帮三年前的自己改bug
三年前,滨海之边马上毕业的老少年 经过几天半死不活的思考之后决定干前端 那个时候为了面试各种css属性js API背的是滚瓜烂熟 然后投简历,企业要项目经验, 我没有工作我哪来的项目经验啊 没人会管你 ...
- libvirt和qga的区别?
本文分享自天翼云开发者社区<libvirt和qga的区别?>,作者:乐道 Libvirt是一个开源项目,提供了一组API.工具.库,用于管理和控制虚拟化平台. 在Openstack环境中, ...
- Visio绘制时间轴安排图的方法
本文介绍基于Visio软件绘制时间轴.日程安排图.时间进度图等的方法. 在很多学习.工作场合中,我们往往需要绘制如下所示的一些带有具体时间进度的日程安排.工作流程.项目进展等可视化图表. ...
- goframe API 自定义接口返回值处理
前言 goframe 默认使用了中间键 ghttp.MiddlewareHandlerResponse, HTTP Server 的数据返回通过 ghttp.Response 对象实现,ghttp.R ...
- Windows下Cmake+VS2017+OpenSceneGraph环境搭建及采坑
一.资料准备 1.OSG源码官网下载地址:http://www.openscenegraph.org/index.php/download-section/stable-releases或者OSGCh ...
- Linux 实现OpenSSL 服务器端客户端通信
1.OpenSSL安装 详情参考博文:https://blog.csdn.net/qq_39521181/article/details/96457673 2.SSL 在学习openssl编程之前,先 ...