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 () { ...
随机推荐
- NFS服务器离线问题解决
NFS服务器离线问题解决 NFS服务器挂了会导致挂载的NFS客户端主机卡顿延迟,或者提示找不到文件 因为在执行一些命令的时候会自动去同步,用作同步的NFS服务端挂了,命令执行就会卡住 不过听说NFS还 ...
- Shell - 脚本案例
题记部分 一.节点状态监控脚本(nodeStatusCheck.sh) [脚本名称]nodeStatusCheck.sh [监控规则]通过ping的方式监控集群节点状态,检查节点是否失联 [实现方式] ...
- CentOS7搭建CDH5.16.2集群 HA高可用(包含Spark2等组件部署)
CentOS7搭建CDH5.16.2集群 HA高可用 机器准备:(这里HA是对HDFS和YARN的高可用) 主机名 cpu内存 bigdata-master01 8c32G bigdata-mas ...
- MySQL数据库datetime类型不能为空值的问题
修改mysql的配置文件:my.ini 将其只的: sql-mode="STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUT ...
- git上传大文件!git push 报错 ! [remote rejected] main -> main (pre-receive hook declined) error_ failed to push some refs to 'xxx
前言 今天在用git push项目的时候,出现了一个报错,记录一下解决方案,以后报同样的错误可以回来看. 错误信息 下面是git push的详细报错信息: 20866@DESKTOP-7R0VL04 ...
- Selenium KPI接口 时间等待
常见的时间等待有三种: 固定.显示.隐士. 应用场景: 主要用于模拟真实的用户操作,有时时间过于短,页面响应不过来,从而造成元素定位不到. 使用格式: sleep(3):一般用于调试 implicit ...
- 修改npm下载地址为淘宝镜像
修改 npm 下载地址 修改为国内淘宝镜像 # 修改为新淘宝镜像(推荐) npm config set registry https://registry.npmmirror.com/ # 旧 npm ...
- arco-design-pro-vite项目配置参考
参考地址 配置源码地址:https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/ 按钮组件 ...
- vue学习一(指令1.v-text,v-html,插值表达式{{msg}})
一.1.v-text,v-html,插值表达式{{msg}} 注:v-text解决差值表达式闪烁问题,因为他是属性不是差值表达式 1.1.v-text: 是没有闪烁问题的,会覆盖标签的元素中原本的内容 ...
- linux 查看jdk安装路径
[root@iz2ze9ufq5ehrayz6j88saz bin]# java -version java version "1.8.0_191" Java(TM) SE Run ...