首页 > 其他好文 > 详细

jq写验证码与点击60秒后重新发送验证码

时间：2019-12-31 12:19:02 阅读：77 评论：0 收藏：0 [点我收藏+]

标签：als 事件 ext lin idc addclass set 20px remove

一.html部分

<div class="f21">获取验证码</div>

二.css部分 //不要忘记引入自己写的css

.f21{

height: 36px;

line-height: 35px;

width: 125px;

margin-right: 55px;

margin-top: 20px;

background-color: #e5e5e5;

font-size: 15px;

border: 1px solid #e5e5e5;

text-align: center;

color: #c7000b;

}

三. js部分 //引入js库及自己写的js

var timer="";

var nums=60;

var validCode=true;//定义该变量是为了处理后面的重复点击事件

$(".f21").on(‘click‘,function(){

console.log("111");

var code=$(this);

if(validCode){

validCode=false;

timer=setInterval(function(){

if(nums>0){

nums--;

code.text(nums+"秒后重新发送");

code.addClass("gray-bg");

}

else{

clearInterval(timer);

nums=60;//重置回去

validCode=true;

code.removeClass("gray-bg");

code.text("发送验证码");

}

},1000)

}

})

jq写验证码与点击60秒后重新发送验证码

标签：als 事件 ext lin idc addclass set 20px remove

原文地址：https://www.cnblogs.com/lxc127136/p/12123673.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！