发送验证码60s倒计时

最新推荐文章于 2024-04-22 11:43:29 发布

qq_39908198

最新推荐文章于 2024-04-22 11:43:29 发布

阅读量209

点赞数

文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/qq_39908198/article/details/107457613

版权

<!DOCTYPE html>
<html>
<head>
	<title>验证码60S倒计时</title>
	<style>

	.disable {
		pointer-events: none;
	}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
	<ul>
		<li class="tel"><input type="text" placeholder="手机号" name="member_phone"></li>
		<dl class="yzm">
			<dt><input type="text" placeholder="请输入验证码" name="auth_code"></dt>
			<div id="code" onclick="settime(this);"><ol >发送验证码</ol></div>
		</dl>
	</ul>
	<script type="text/javascript">
		//倒计时
		var countdown=60;
		var flag = false;
		function settime(val) {
			console.log(this.flag)
			if (countdown==60){
				sendSms()
			}
			if (countdown == 0) {
				$("#code").removeClass("disable");
				$("#code ol").text("获取验证码");
				countdown = 60;
				return false;
			} else {
				if (this.flag){
					$("#code").removeClass("disable");
					$("#code ol").text("获取验证码");
					flag=false;
					countdown=60;
					return  false;
				}
				$("#code").addClass("disable");
				val.value="重新发送(" + countdown + ")";
				$("#code ol").text("重新发送(" + countdown + ")")
				countdown--;
			}
			setTimeout(function() {
				settime(val);
			},1000);
		}

		function sendSms() {
			var  phone =$("[name='member_phone']").val();
			if (phone==''){
				flag=true;
				alert("手机号不能为空");
			}else{
				// ajax请求代码
			}
		}
	</script>
</body>
</html>