js实现倒计时60秒的简单代码(推荐)

最新推荐文章于 2024-02-03 11:02:39 发布

wgod

最新推荐文章于 2024-02-03 11:02:39 发布

阅读量4.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44324124/article/details/98177144

版权

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>js实现倒计时60秒的简单代码(推荐)</title>
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.1/jquery.min.js"></script>
	</head>

	<body>
		<<div class="input">
			<input class="tel input_all" type="text" name="tel" placeholder="手机号">
			</div>
			<div class="input huoqu">
				<input class="yzm input_all" type="text" name="code" placeholder="验证码">
				<button class="btn1">获取验证码</button>
			</div>
			<span class="error"></span>
			<script type="text/javascript">
				var btn1 = document.querySelector('.btn1');
				var tel = document.querySelector('.tel');
				var error = document.querySelector('.error');
				var time = 60;
				btn1.onclick = function() {
					var name = tel.value;
					if(name == "") {
						error.innerHTML = '手机号不能为空!';
						return;
					} else {
						if(!(/^1[3|4|5|7|8]\d{9}$/.test(name))) {
							error.innerHTML = '手机号格式有误.';
							return;
						}
					}
					var timer = setInterval(function() {
						time--;
						btn1.innerHTML = time + "秒";
						btn1.disabled = true;
						if(time == 0) {
							time = 60;
							clearInterval(timer);
							btn1.innerHTML = "获取验证码";
							btn1.disabled = false;
						}
					}, 1000);
				}
			</script>
	</body>

</html>