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 () { ...
随机推荐
- Thor: 统一AI模型网关的革新之选
Thor: 统一AI模型网关的革新之选 项目价值 Thor(雷神托尔)作为一个强大的AI模型管理网关,解决了当前AI领域一个关键痛点:不同AI服务商的API格式各异,集成成本高.Thor通过将各种AI ...
- Memcached深度剖析:解锁高性能分布式内存缓存的秘密
引言 在当今快节奏的互联网世界中,应用程序的响应速度往往是用户体验的关键.为了提升性能,减轻数据库的压力,Memcached作为一种高性能的分布式内存对象缓存系统,被广泛应用于加速动态Web应用程序. ...
- 分享4款.NET开源、免费、实用的商城系统
前言 今天大姚给大家分享4款.NET开源.免费.实用的商城系统,希望可以帮助到有商城系统开发需求的同学. nopCommerce nopCommerce是一个.NET开源功能丰富.免费.灵活且可定制的 ...
- mySql跳过行数获取多少行
LIMIT :需要获取多少条记录 OFFSET :跳过前面的多少行记录从后面开始获取 SELECT * FROM USER LIMIT 32 OFFSET 1 只获取12行记录 跳过第一条记录 SEL ...
- C# 搭建一个 基于ISqlSugarClient 三层架构框架 涉及数据库仓储 然后中间又有业务逻辑层 案例
要在C#中搭建基于ISqlSugarClient的三层架构框架,你需要定义数据访问层(DAL).业务逻辑层(BLL)和表现层(UI).下面是一个完整的例子,涉及数据库仓储.业务逻辑层,以及依赖注入.这 ...
- AAA认证
AAA认证(Authentication, Authorization, and Accounting)是一个网络安全框架,用于管理用户如何访问网络资源.具体来说: 认证(Authentication ...
- burp suite使用(一) --- 抓包,截包,改包
接下来我将以一个新手的角度讲述如何使用burp来抓包,截包和改包. 我采用的是UC浏览器来配合burp的使用. 1.设置浏览器 设置---其他---更改代理设置 由于UC浏览器采用的是ie的内核,所以 ...
- SOA架构和微服务架构的区别
1.SOA架构和微服务架构的区别 首先SOA和微服务架构一个层面的东西,而对于ESB和微服务网关是一个层面的东西,一个谈到是架构风格和方法,一个谈的是实现工具或组件. 1.SOA(Service Or ...
- 官方的 MCP C# SDK:csharp-sdk
csharp-sdk 这是 Model Context Protocol(MCP)官方提供的 C# SDK,为 MCP 服务器和客户端提供简单易用的接口, 主要由微软维护.MCP 是由 Claude( ...
- Linux+Typora+Picgo图床配置
Linux+Typora+Picgo图床配置 首先不建议安装在UbuntuStore里的版本,会有一些限制. 首先安装node.js 去官网下载编译好的源码,配置软连接,使全局都可以使用node命令. ...