前端之获取验证码后倒计时效果

最新推荐文章于 2024-05-17 22:58:14 发布

原创最新推荐文章于 2024-05-17 22:58:14 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

6 篇文章

订阅专栏

本文分享了一种常用的前端效果——验证码倒计时的实现方法。通过HTML和JavaScript代码，详细介绍了如何在用户点击获取验证码后，自动进行60秒倒计时，期间禁用获取按钮，直至倒计时结束。

前端 —— 获取验证码后倒计时效果

如题，特别常用的一个前端效果，由于本人前端不精，只能记录下来，分享一下。

HTML代码

	<div class="login">
		<a class="back">返回首页</a>
		<div class="login-form reg-form clearfix">
			<div class="login-fr">
				<form>
					<p class="log-tit">你好！欢迎来到 某某票据平台</p>
					<p class="log-input">
						<span class="sp1">手机号</span>
						<input type="phone" class="log-s" placeholder="请输入手机号" />
					</p>
					<p class="log-input">
						<span class="sp1">验证码</span>
						<input type="text" class="log-s" placeholder="请输入验证码" />
						<a class="a1 get-code" id="getcode" >获取验证码</a>
					</p>
					<p class="log-input">
						<span class="sp1">登录密码</span>
						<input type="password" class="log-s" placeholder="请输入密码" />
					</p>
					<p class="log-input">
						<span class="sp1">确认密码</span>
						<input type="password" class="log-s" placeholder="请再次输入密码" />
					</p>
					<div class="lgc clearfix">
						<div class="pretty fl">
							 <input id="bt_c" name="checkbox" type="checkbox" checked="checked">
					         <label for="bt_c"></label>
					         <span>阅读并接受<a>《会员注册协议》</a></span>
						</div>
					</div>
					<p class="log-btn"><input type="submit" class="log-s" value="注册"/></p>
				</form>
			</div>
		</div>
		
	</div>
	<script>
			var wat=20;
			function GetRTime(){
				if(wat == 0){
					$("#getcode").html('获取验证码');
				}else{
					$("#getcode").html('重新发送'+wat+'秒');
					wat--;
					setTimeout("GetRTime()",1000);
				}
			}
	 		$(".get-code").click(function(){
	 			var hh = $("#getcode").html();
				if(hh != '获取验证码'){
					return false;
				}else{
					wat=20;
					GetRTime();
					}
			});		
	</script>