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 () { ...
随机推荐
- docker - [12] 镜像发布到DockerHub、阿里云
题记部分 一.镜像发布到 DockerHub 1.地址:https://hub.docker.com/ 注册自己的账号 2.确定这个账号可以登录 3.在服务器上提交镜像 4.登录之后提交镜像即可. [ ...
- KaFka 安装与基本使用
学了有一段时间的大数据了,学习新的组件,大部分安装可以分为三步:上传解压,配置文件,启动. 分享一下我的kafka安装包: 链接:https://pan.baidu.com/s/1fbydwZwcYy ...
- ubuntu20.04使用EasyConnect
起因:BUAA校外访问内网vpn的客户端 用的学校vpn内下载的deb包EasyConnect_x64_7_6_7_3.deb,就直接sudo apt install安装了,之后应用的目录在/usr/ ...
- 【Vue3】下载zip文件损坏的问题
需求: 需要在vue3上实现Asp.net Web API 下载zip包的功能,本身需求很简单,但是中间遇到了问题,记录一下. 问题: 下载的zip包和后端的zip包大小不一致,后端生成的zip 61 ...
- minio迁移工具 mc
mc mirror 命令属于 MinIO Client (mc) 工具,默认不会随 MinIO 服务器一起安装,需要 单独安装. 安装 MinIO Client (mc) Linux/macOS 执行 ...
- 网络编程-关闭连接(2)-Java的NIO在关闭socket时,究竟用了哪个系统调用函数?
背景 在上一讲网络编程-关闭连接-C/C++相关系统调用中,提到过,目前项目使用Netty框架来实现的网络编程,查看netty源码可以得知,netty最终是调用了java Nio的close接口做的关 ...
- WPF MessageBox
参考文档 MessageBox MessageBoxButton MessageBoxImage MessageBoxOptions MessageBoxResult
- 《机器人SLAM导航核心技术与实战》第1季:第1章_ROS入门必备知识
<机器人SLAM导航核心技术与实战>第1季:第1章_ROS入门必备知识 视频讲解 [第1季]1.第1章_ROS入门必备知识-视频讲解 [第1季]1.1.第1章_ROS入门必备知识-ROS简 ...
- 行为识别TSM训练ucf101数据集
序言 最近有个行为检测的需求,打算用行为识别做,纯小白入这个方向,啃了两周的TSM原理和源码,训练好自己的数据集后,发现好像没法应用到自己的需求场景??玛德!算了,还是要记录一下.原理就没别要讲了,网 ...
- 使用Python可视化莫比乌斯带
引言 莫比乌斯带,这个名字或许大家都听过,但你知道它是什么吗?它是一种非常神奇的几何物体,只有一个面和一个边,乍一看,似乎是个不可思议的存在.今天,我们就来用 Python 轻松地可视化莫比乌斯带,一 ...