js倒计时验证码

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

QSWQSWQSWQSWQSW

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

阅读量147

点赞数

分类专栏： IT js css html 文章标签：倒计时验证码

本文链接：https://blog.csdn.net/qq_43209114/article/details/95349263

版权

IT 同时被 3 个专栏收录

83 篇文章 2 订阅

订阅专栏

46 篇文章 0 订阅

订阅专栏

html

41 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<style type="text/css">
			a {
				color: #666666;
			}
			
			.collect_head {
				width: 100%;
				height: 0.88rem;
				line-height: 0.88rem;
				display: flex;
				align-items: center;
				border-bottom: 0.2rem solid #F4F4F4;
			}
			
			.collect_head img {
				width: 0.36rem;
				height: 0.36rem;
				margin-left: 0.3rem;
				position: absolute;
			}
			
			.collect_head span {
				margin: 0 auto;
				font-size: 0.36rem;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				color: rgba(40, 43, 46, 1);
				display: inline-block;
			}
			
			.news_password {
				width: 100%;
				border-bottom: 0.2rem solid #F4F4F4;
				box-sizing: border-box;
				font-size: 0.3rem;
				color: #9B9C9E;
			}
			
			.news_left {
				width: 90%;
				height: 100%;
				float: left;
			}
			
			.news_right {
				width: 10%;
				height: 100%;
				float: right;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.news_left li:nth-child(1) {
				list-style: disc;
				margin-left: 0.8rem;
				font-size: 0.3rem;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: rgba(40, 43, 46, 1);
				margin-top: 0.2rem;
			}
			
			.news_left li:nth-child(2) {
				font-size: 0.3rem;
				font-family: PingFangSC-Light;
				font-weight: 300;
				color: rgba(153, 153, 153, 1);
				margin-top: 0.2rem;
				margin-left: 0.8rem;
			}
			
			.news_right img {
				width: 0.24rem;
				height: 0.4rem;
			}
			
			.login_btn_hui {
				width: 6.9rem;
				height: 0.88rem;
				line-height: 0.88rem;
				border: none;
				outline: none;
				font-size: 0.36rem;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				color: #FFFFFF;
				background: rgba(204, 204, 204, 1);
				border-radius: 0.6533rem;
				text-align: center;
				margin: 0 auto;
				margin-top: 1rem;
			}
			
			.login_btn {
				width: 6.9rem;
				height: 0.88rem;
				line-height: 0.88rem;
				border: none;
				outline: none;
				font-size: 0.36rem;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				background: rgba(0, 0, 0, 1);
				border-radius: 0.6533rem;
				text-align: center;
				margin: 0 auto;
				margin-top: 1rem;
			}
			
			.get-code {
				position: absolute;
				top: 1.32rem;
				right: 0.3rem;
			}
			
			input::-webkit-input-placeholder {
				/* placeholder颜色  */
				color: #9B9C9E;
			}
			
			.news_password p span,
			.news_password p span {
				/*flex: 1;*/
				margin-left: 0.3rem;
				font-size: 0.3rem;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: rgba(40, 43, 46, 1);
				width: 1.1rem;
				display: inline-block;
			}
			
			.news_password p {
				width: 7.5rem;
				height: 1.08rem;
				line-height: 1.08rem;
			}
			
			input {
				height: 100%;
			}
			
			#btn {
				background: #ffffff;
				margin-left: 0.3rem;
				color: #999999;
			}
		</style>
	</head>

	<body>
		<p>
			<span>验证码</span>
			<input type="text" placeholder="输入验证码" class="code" />
			<input type="button" id="btn" value="获取验证码" onclick="sendemail()" />
		</p>
		<div class="login_btn_hui">
			完成
		</div>
	</body>
	<script type="text/javascript">
		
//		var $mobile = "{$__USER_INFO__['mobile']}";

		//短信验证码
		var countdown = 60;
		function sendemail() {
			var obj = $("#btn");
			const $type = 2;
//			var res = /^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}$|17[0-9]{1}[0-9]{8}$/;
//			var re = new RegExp(res);
//			if(re.test($mobile)) {
				//发送验证码倒计时
//				$.ajax({
//					type: "post",
//					data: {
//						'mobile': $mobile,
//						'type': $type
//					},
//					url: "{:U('Sms/sendSms');}",
//					dataType: 'json',
//					success: function(data) {
//						var $info = data.info
//						if(data.status == 1) {
							var countdown = 60
//							layer.open({
//								type: 1,
//								anim: 'up',
//								content: $info,
//							});
							setTimeout(function() {
								settime(obj)
								if(countdown == 0) {
									clearTimeout();
								}
							}, 1000)
//						} else if(data.status == 2) {
//							layer.open({
//								type: 1,
//								anim: 'up',
//								content: $info,
//							});
							countdown = 0;
//						}
//					}
//				});
//			} else {
//				layer.open({
//					type: 1,
//					anim: 'up',
//					content: "请输入正确的手机号",
//				});
				countdown = 0;
//			}

//			if(!re.test($mobile)) {
//				countdown = 0;
//			}

		}

		//发送验证码倒计时
		function settime(obj) {
			if(countdown == 0) {
				obj.attr('disabled', false);
				obj.val("获取验证码");
				countdown = 60;
				return;
			} else {
				obj.attr('disabled', true);
				obj.val("重新发送(" + countdown + ")");
				countdown--;
			}
			setTimeout(function() {
				settime(obj)
				if(countdown == 0) {
					clearTimeout();
				}
			}, 1000)
		}

		// 修改密码完成按钮
		$(".login_btn_hui").on("click", function() {
			var obj = $("#btn");
			$(this).attr("disabled", true);
			var $sms_code = $(".code").val();
			var $password = $(".new_mima").val();
			const $type = 1;
			$.ajax({
				type: "post",
				data: {
					'mobile': $mobile,
					'sms_code': $sms_code,
					'password': $password
				},
				url: "{:U('User/editPassword')}",
				dataType: 'json',
				success: function(data) {
					console.log(data)
					let $info = data.info
					if(data.status == 1) {
						window.location.href = data.url;
					} else if(data.status == 2) {
//						layer.open({
//							type: 1,
//							anim: 'up',
//							content: $info,
//						});
					}
					$(".login_btn").removeAttr("disabled");
				}
			});
		})
	</script>

</html>

QSWQSWQSWQSWQSW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js倒计时验证码

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> <style type="text/css"> ...
复制链接

扫一扫

专栏目录