美文网首页
三种方法使用jquery获取验证码倒计时

三种方法使用jquery获取验证码倒计时

作者: 笑啥风云 | 来源:发表于2017-09-11 23:40 被阅读29次

三种方法使用jquery获取验证码倒计时,并设置防重复点击
<div class="root">




<button class="btn">获取验证码1</button>




<button class="btn1">获取验证码2</button>


<button class="btn3">获取验证码3</button>
</div>
<script type="text/javascript">
// 一 利用绑定和解绑点击事件
let time1 = 10;
var count = time1;
var countinterval;
var button = $('.btn');
button.click(showTitle);
function showTitle(){
console.log(00000);
countinterval = setInterval(timecount, 1000);
button.off('click',showTitle);//解绑点击事件
}
function timecount(){
button.text(count+'s');
if (count<=0) {
count = time1;
clearInterval(countinterval);
button.text('重新获取验证码');
button.on('click',showTitle);
}
else
count--;
}
//二 设置disabled属性
let time2 = 15;//15s
var count1 = time2;
var countinterval2;
var button2 = $('.btn1');
button2.click(showtitle2);
function showtitle2(){
console.log(11111);
// button2.off();
countintervalt = setInterval(timecount1,1000);
button2.attr('disabled',true);
}
function timecount1(){
button2.text(count1+'s');
if (count1<=0) {
count1 = time2;
clearInterval(countintervalt);
button2.text('重新获取验证码');
button2.attr('disabled',false);
}
else
count1--;
}
//三 加标识
let time3 = 20;//15s
var canclick=true;
var count2 = time3;
var countinterval3;
var button3 = $('.btn3');
button3.click(showtitle3);
function showtitle3(){
if (canclick) {
console.log(11111);
countinterval3 = setInterval(timecount2,1000);
canclick = false;
}
}
function timecount2(){
button3.text(count2+'s');
if (count2<=0) {
count2 = time3;
clearInterval(countinterval3);
button3.text('重新获取验证码');
canclick = true;
}
else
count2--;
</script>

相关文章

  • 三种方法使用jquery获取验证码倒计时

    三种方法使用jquery获取验证码倒计时,并设置防重复点击 获取验证码1 获取验证码2 获取验证码3 /...

  • iOS 按钮倒计时

    使用倒计时获取验证码是app中最长遇到的,常用的方法有三种 NSTimer Thread GCD(我使用的) 创建...

  • iOS倒计时

    pragma mark ---获取验证码 /**获取验证码,倒计时@param sender 获取验证码的按...

  • iOS实现倒计时的三种方式

    iOS实现倒计时的三种方式 做iOS app开发的过程当中,经常会出现获取验证码等需求,这个时候一般会使用倒计时来...

  • jquery添加插件

    三种方法: 1.使用$.extend()来拓展jquery 2.使用$.fn来给jquery添加新的方法 ...

  • jQuery基础功能

    jQuery 如何获取元素 方法一:使用CSS选择器 方法二:使用jQuery自有的特殊选择器 jQuery 的链...

  • 【微信小程序】获取验证码60s倒计时

    验证码倒计时,手机号格式校验。 【简要说明】code字段在获取验证码之前显示验证码,点击获取验证码后显示倒计时数字...

  • IOS倒计时按钮实现思路及Demo

    前言 最近因为项目中涉及到短信获取验证码功能,并且获取验证码按钮需要显示倒计时功能,同时当从获取验证码界面在倒计时...

  • 在iOS9或更老系统版本中使用NSTimer+Block方法

    在iOS9或更老系统版本中使用NSTimer+Block方法 在许多倒计时功能(例如获取短信验证码)的时候,我们通...

  • jQuery版关于checkbox 选中问题

    今天在使用jQuery版时,在获取checkbox为选中和验证码它是否被选中问题。 获取checkbox的选中状态...

网友评论

      本文标题:三种方法使用jquery获取验证码倒计时

      本文链接:https://www.haomeiwen.com/subject/iheqsxtx.html