JQ倒计时发送验证码

最新推荐文章于 2023-10-28 11:29:30 发布

相思比梦长

最新推荐文章于 2023-10-28 11:29:30 发布

阅读量626

点赞数 1

分类专栏： WEB前端文章标签： JQ 倒计时发送验证码

本文链接：https://blog.csdn.net/netuser1937/article/details/54943276

版权

WEB前端专栏收录该内容

114 篇文章 2 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq 倒计时代码发送验证码</title>
<script language="javascript">
		//倒计时		
		var times = 60;
		function waitTime() {
			if (times == 0) {
				$("#codeButton").removeAttr("disabled").val("重新获取验证码");
				times = 60;
			} else {
				$("#codeButton").attr("disabled", true).val("在(" + times + ")秒后重新发送");
				times--;
				setTimeout(function() {waitTime()},1000)
			}
		}
		
		//ajax无刷新GET方式 发送验证码
		$("#codeButton").on('click',function(){
			var telphone=$('#telphone').val();
			$.ajax({
					 type: "GET",
					 url: "XXOO",
					 data: {telphone:telphone},
					 success: function(data){
					 	waitTime();
					}
			 });
		});
</script>
</head>

<body>
<label>请输入手机号码：
  <input type="text" id="telphone" name="telphone" />
</label>
<label>
  <input type="button" id="codeButton" value="获取验证码"/>
</label>
<label>请输入验证号码：
  <input type="text" id="rcode"/>
</label>
</body>
</html>