简单实现js获取验证码

web前端 同时被 3 个专栏收录
32 篇文章 1 订阅
7 篇文章 0 订阅
37 篇文章 0 订阅

倒计时获取验证码,设定时间内不可重复点击获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<div class="getcode" id="send_phone" flag="true">获取验证码</div>
	</body>
	<script type="text/javascript">
		var btn = document.querySelector("#send_phone");
		var time, timer;
		btn.onclick = function(){
			if(btn.getAttribute("flag") == "false" || btn.getAttribute("flag") == false)
            {
                return false;
            }
            btn.setAttribute("flag", false);
			time = 60;
			clearInterval(timer); //清除计时器
            btn.innerText = time + "s";
            $(".getcode").addClass("getcode-disabled");
            timer = setInterval(function(){
                time--;
                $(".getcode").text(time + "s");
                if(time <= 0){
                    //重置获取验证码按钮状态,变为可点击,即可再次获取
                    clearInterval(timer); //清除计时器
                    $(".getcode").removeClass("getcode-disabled");
                    btn.innerText = "获取验证码";
                    btn.setAttribute("flag", true);
                }
            },1000);
		}
	</script>
</html>

  • 0
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值