三种方法使用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获取验证码倒计时
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 在前两篇给大家介绍各种折线的绘制以及各种时间轴的不同设计,今天继续给大家分享一篇各种排序的动态实现.好了现在...
