jQuery 点击获取验证码,倒计时30秒

//HTML:

<div class="layui-form-item">
<input class="layui-yanzheng" id="rcode" name="code" placeholder="请输入验证码" type="text" autocomplete="off">
<input class="layui-btnr" type="button" name="" lay-submit="" lay-filter="codes" id="btnSendCodes" value="获取验证码" />
<p class="rtishi">请输入您获取的验证码</p>

</div>

//jQuery:

//倒计时
var countdown=30; //倒计时秒数
//console.log(1)
function sendemail(){
    var btnSendCode = $("#btnSendCodes");
    settime(btnSendCode);
    }
function settime(btnSendCode) { //发送验证码倒计时
    if (countdown == 0) {
        btnSendCode.attr('disabled',false);
        btnSendCode.html("获取验证码");
        countdown = 30;
$('#btnSendCode').attr('onclick','Verification()');
$('#rLi').css({
         'background':'#ffffff',
         'cursor':' pointer',
         ' pointer-events':'none'
        });
        $('#btnSendCode').css({
         ' pointer-events':'none',
         'cursor':' pointer',
         'color':'#337abe'
        })
         $('#btnSendCodes').val("获取验证码")
        return;
    } else {
        btnSendCode.attr('disabled',true);
        $('#btnSendCode').removeAttr('onclick');
        $('#rLi').css({
         'background':'#c0c0c0',
         'disabled':true,
         'cursor':' progress',
         ' pointer-events':'none'
        });
        $('#btnSendCode').css({
         ' pointer-events':'none',
         'cursor':' progress',
         'color':'red'
        })
        btnSendCode.val("重新发送(" + countdown + ")");
        countdown--;
    }
setTimeout(function() {
    settime(btnSendCode)
},1000)
}

jQuery 点击获取验证码,倒计时30秒相关推荐

JS点击获取验证码后60秒内禁止重新获取（防刷新）
JS点击获取验证码后60秒内禁止重新获取(防刷新) 参考 · 阅读文章: JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效) 注意: 场景:在登录页点击发送啊验证码按钮,开始进入倒计时,在第3 ...
Axure9 实现点击获取验证码倒计时功能
此文章帮助大家实现App的点击获取验证码的倒计时功能. 1:创建按钮和全局变量: 拖入一个矩形,创建全局变量Time=60. 在项目里面就可以找到创建全局变量的地方. 2:添加点击事件: (1):添加 ...
获取验证码倒计时60秒
<template><view class="content"><view class="inps"><input c ...
jquery实现点击按钮变灰不可点击并开始倒计时10秒特效代码
jquery实现点击按钮变灰不可点击并开始倒计时10秒特效代码实现代码代码解析 1.给按钮绑定一个点击事件 2.设置一个初始的时间值,决定按钮过多少秒恢复 3.进行时间判断 4.设置一个计时器实 ...
健康管理系统第七天（移动端_体检预约(手机号校验、发送验证码之后30秒倒计时效果、生成验证码、向手机发送验证码)）
一.体检预约流程用户可以通过如下操作流程进行体检预约: 1.在移动端首页点击体检预约,页面跳转到套餐列表页面 2.在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面 3.在套餐详情页面点击立即预 ...
Vue - 实现获取手机验证码倒计时 60 秒（手机号+验证码登录功能）
前言网上的大部分获取验证码逻辑的例子,代码多还不健壮,本文将用最少的代码实现相同的功能. 当点击获取验证码按钮时,会自动进入倒计时,同时按钮无法点击, 您可以自定义倒计时时间,如下图所示: 这块由于 ...
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
短信验证码登录功能项目分析核心代码 1.外部js库调用 2.HTML容器构建 3.javaScript业务逻辑验证 4.后端验证逻辑总结短信验证码是通过发送验证码到手机的一种有效的验证码系统, ...
JS实现自动倒计时30秒后按钮才可用
JS实现自动倒计时30秒后按钮才可用 helloweba.com 作者:月光光时间:2015年08月28日 12:22 标签: javascript 倒计时 WEB开发中经常会用到倒计时来限制用户 ...
注册登录时，在点击获取验证码按钮后，改变按钮状态
按钮首先是获取验证码的按钮: <div class="layui-form-item"><label for="phoneCode" cla ...

jQuery 点击获取验证码,倒计时30秒

jQuery 点击获取验证码,倒计时30秒相关推荐

最新文章

热门文章