获取验证码倒计时效果

最新推荐文章于 2024-05-22 10:11:16 发布

前端-文龙刚

最新推荐文章于 2024-05-22 10:11:16 发布

阅读量239

点赞数

分类专栏： Javascript 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_17211063/article/details/128313955

版权

Javascript 专栏收录该内容

84 篇文章 1 订阅

订阅专栏

效果图：

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="https://www.ltwmsjzx.gov.cn/static_material/source_app/css/common.css"/>
	<style>
		.pf{position:fixed;}
		.TipInfo-pop{width:100%;height:100%;background-color:rgba(0,0,0,0.3);z-index:999;font-size:.14rem;}
		.TipInfo-pop .TipInfo-container{top:50%;left:5%;width:90%;background-color:#fff;border-radius:4px;}
		.TipInfo-pop .TipInfo-container strong{padding:.2rem 0;display:flex;align-items:center;justify-content:center;font-size:.16rem;font-weight:500;}
		.TipInfo-pop .TipInfo-phone{margin-bottom:.2rem;padding:0 .2rem;}
		.TipInfo-pop .TipInfo-phone span.phone-num{padding:.1rem 0;color:#aaa;display:flex;justify-content:center;font-size:.15rem;}
		.TipInfo-pop .TipInfo-phone p.pr{position:relative;overflow:hidden;border-radius:4px;}
		.TipInfo-pop .TipInfo-phone p.pr input{width:100%;height:.3rem;border:1px solid #eee;text-indent:.1rem;border-radius:4px;}
		.TipInfo-pop .TipInfo-phone p.pr a.get-phoneCode{top:0;right:-1px;height:.34rem;padding:0 .1rem;position:absolute;background-color:#eee;display:flex;align-items:center;justify-content:center;border-radius:0 4px 4px 0;}
		.TipInfo-pop .TipInfo-phone p.pr a.get-again{display:none;}
		.TipInfo-pop .get-again i{color:#c20007;}
		.TipInfo-pop .TipInfo-footer{border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-between;}
		.TipInfo-pop .TipInfo-footer a{line-height:.46rem;flex:1;display:flex;align-items:center;justify-content:center;}
		.TipInfo-pop .TipInfo-footer a.get-TipInfo{border-left:1px solid #eee;color:#39a4ff;}
	</style>
</head>
<body>
	<div class="TipInfo-pop pf">
		<div class="TipInfo-container pf">
			<strong class="text-c">这是警告信息!</strong>
			<div class="TipInfo-phone">
				<span class="phone-num">18220506781</span>
				<p class="pr">
					<input type="text" name="" id="" value="" />
					<a class="pa get-phoneCode get-start" href="javascript:;">获取验证码</a>
					<a class="pa get-phoneCode get-again" href="javascript:;"></a>
				</p>
			</div>
			<div class="TipInfo-footer">
				<a class="close-TipInfo" href="javascript:;">取消</a>
				<a class="get-TipInfo" href="javascript:;">确定</a>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript" src="https://www.ltwmsjzx.gov.cn/static_material/public/jquery-3.3.1.min/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		var TipInfo_c_h = $('.TipInfo-container').height();
		$('.TipInfo-container').animate({
			'margin-top':-(TipInfo_c_h/2)
		});
		
		$('.TipInfo-pop .close-TipInfo').click(function(){
			$('.TipInfo-pop').fadeOut()
		});
		$('.TipInfo-pop .get-TipInfo').click(function(){
			$('.TipInfo-pop').fadeOut()
		});
		
		$('.TipInfo-pop').click(function(){
			$(this).fadeOut()
		});
		$('.TipInfo-container').click(function(e){
			e.stopPropagation()
		});
		
		$('.TipInfo-pop .get-start').click(function(){
			$(this).css('display','none');
			$('.TipInfo-pop .get-again').css('display','flex');
			var time = 10;
			$('.TipInfo-pop .get-again').html("<i>"+time+"</i>"+' 秒后重新获取');
			
			var times = setInterval(function(){
				time--;
				$('.TipInfo-pop .get-again').html("<i>"+time+"</i>"+' 秒后重新获取');
				if(time===1){
					clearInterval(times);
					$('.TipInfo-pop .get-again').css('display','none');
					$('.TipInfo-pop .get-start').css('display','flex').text('重新获取');
				}
			},1000)
		})
	});
</script>