登录使用js实现验证码倒计时

最新推荐文章于 2023-03-25 17:16:12 发布

One_Piece111

最新推荐文章于 2023-03-25 17:16:12 发布

阅读量178

点赞数 1

分类专栏：应该没人会看文章标签： css html javascript

本文链接：https://blog.csdn.net/One_Piece111/article/details/120428159

版权

应该没人会看专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<!-- <link rel="stylesheet" href="assets/css/bootstrap-theme.css" /> -->
		<style>
			.bg {
				background: url(assets/images/login_bg.jpg) no-repeat;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				background-attachment: fixed;
			}

			.body_center {
				height: 400px;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;

			}

			.main_content {
				background: #FFFFFF;
				margin-left: auto;
				margin-right: auto;
				text-align: left;
				float: none;
				border-radius: 8px;
			}
			
			.btn-outline-primary {
				display: inline-block;
				width: 33%;
				float:right;
				font-size: 14px;
				margin-left: 7px;
				background-color: #007bff;
				color: white;
			}
			
			.btn-primary {
				width: 100%;
				height: 42px;
			}
		</style>
	</head>
	<body class="bg">
		<div class="container body_center">
			<div class="">
			<div class="col-12 col-xl-5 col-lg-6 col-md-7 col-sm-8 p-md-5 p-4 main_content">
				<form>
					<div class="form-group">
						<label for="telephone">手机号</label>
						<input type="text" class="form-control" id="telephone" placeholder="请输入手机号">
					</div>
					<div class="form-group">
						<label for="code">验证码</label>
						<div class="input-group">
							<input type="text" id="code" class="form-control" placeholder="请输入验证码"
								aria-label="Recipient's username" aria-describedby="button-addon2">
							<!--  div class="input-group-append" style="position: absolute;right: 10px;bottom: 105px;line-height: 40px;border: 0px solid white;"> -->
								<input class="btn btn-outline-primary" type="button"
									id="button-addon2" onclick="sendedVarCode();" value="获取验证码"/>
						</div>
					</div>
					<div class="fm-btn">
						<button type="submit" class="btn btn-primary">登录</button>
					</div>
				</form>
			</div>
			</div>
		</div>



	</body>

	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		function sendedVarCode(){
			var $mobile = $("input[id=telephone]");//用户填写的手机号
			var $sendedVarCode = $("input[id=button-addon2]");//用来记录给用户发送的验证码
			var data = {};
			data.mobile = $.trim($mobile.val());
			if( data.mobile == '') {
				alert("请输入手机号码!");
				return;
			}else if( checkPhone(data.mobile ) == false) {
				alert("请输入正确的手机号!");
				return;
			}
			countdownHandler();
		}
		
		//校验手机号
		function checkPhone(phone) {
			re = /^1[3456789]\d{9}$/
			if(re.test(phone)) {
				return true;
			} else {
				return false;
			}
		}
		
		//短信验证码倒计时
		var countdownHandler = function() {
			var $button = $("#button-addon2");
			var number = 60;
			var falg = 1;
			var countdown = function() {
				if(number == 0) {
					$button.attr("disabled",false);
					$button.val("重新发送");
					$button.css({"background":"#007bff","color":"white","cursor":"pointer"})
					number = 60;
					falg = 0;
					return;
				} else if(falg == 1) {
					$button.attr("disabled",true);
					$button.css({"background":"white","color":"#007bff","cursor":"default"});
					$button.val(number + "秒后重新获取");
					number--;
				}
			};
			setInterval(countdown,1000);
		}
	</script>
</html>