发送验证码的倒计时

最新推荐文章于 2024-08-23 09:32:06 发布

Skye Lin

最新推荐文章于 2024-08-23 09:32:06 发布

阅读量7.6k

点赞数 5

分类专栏： Java Web html

本文链接：https://blog.csdn.net/skye_95/article/details/81663957

版权

html 同时被 2 个专栏收录

35 篇文章 3 订阅

订阅专栏

Java Web

27 篇文章 1 订阅

订阅专栏

在发送短信验证码和邮箱验证码的时候，都会倒计时。本来想用layui的button控件实现，但是尝试多次没有成功，最后选择用input标签。

方法一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var InterValObj; //timer变量，控制时间
			var count = 60; //间隔函数，1秒执行
			var curCount;//当前剩余秒数
			//发送短信验证码
			function sendMessage() {
			curCount = count;
			// 设置button效果，开始计时
			document.getElementById("btnSendCode").setAttribute("disabled","true" );//设置按钮为禁用状态
			document.getElementById("btnSendCode").value=curCount + "秒后重获";//更改按钮文字
			InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
			}
			
			//timer处理函数
			function SetRemainTime() {
				if (curCount == 0) {//超时重新获取验证码                
					window.clearInterval(InterValObj);// 停止计时器
					document.getElementById("btnSendCode").removeAttribute("disabled");//移除禁用状态改为可用
					document.getElementById("btnSendCode").value="重获验证码";
				}else {
					curCount--;
					document.getElementById("btnSendCode").value=curCount + "秒后重获";
				}
			}
		</script>
	</head>
	<body>
		
		<input id="btnSendCode" style="width: 120px;height: 39px;text-align: center;background-color: white;border: 1px solid #E2E2E2;" name="btnSendCode" type="button"   value="获取验证码" onclick="sendMessage();" />
		
	</body>
</html>

点击之前

点击之后倒计时

超时后点击重新获取

方法二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" />
		<script type="text/javascript">
			 var clock = '';
			 var nums = 10;
			 var btn;
			 //发送验证码
			 function sendCode(thisBtn)
			 { 
			 /*还需根据情况进行邮箱或手机号校验*/
			
			 btn = thisBtn;
			 btn.disabled = true; //将按钮置为不可点击
			 btn.value = nums+'秒可后重新获取';
			 clock = setInterval(doLoop, 1000); //一秒执行一次
			 
			 /*ajax请求发送*/
			$.ajax({
				type:"get",
				url:"",
				async:true
			});
			 }
			 
			 
			 function doLoop()
			 {
				 nums--;
				 if(nums > 0){
				  	btn.value = nums+'秒后可重新获取';
				 }else{
					clearInterval(clock); //清除js定时器
					btn.disabled = false;
					btn.value = '点击发送验证码';
					nums = 10; //重置时间
				 }
			 }
			</script>
	</body>
</html>

点击之前：