验证码60秒发送（获取验证码）demo效果示例（整理）

知秋~

已于 2022-06-14 14:00:43 修改

阅读量1.1w

点赞数 1

文章标签： javascript jquery html

于 2018-01-27 17:02:02 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/79181602

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取验证码</title>
		<script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>
		<script type="text/javascript">
			var countdown = 60;

			function send() {
				var obj = $("#btn");
				settime(obj);

			}

			function settime(obj) { //发送验证码倒计时
				if (countdown == 0) {
					obj.attr('disabled', false);
					obj.val("获取验证码");
					$("#btn").css("background", "#00bc12")
					countdown = 60;
					return;
				} else {
					obj.attr('disabled', true);
					obj.val("(" + countdown + ")S");
					countdown--;
					$("#btn").css("background", "#ccc")
				}
				setTimeout(function() {
					settime(obj)
				}, 1000)
			}
		</script>
		    
		<style>
			#btn {
				width: 180px;
				height: 56px;
				line-height: 56px;
				text-align: center;
				background: #00BC12;
				border-radius: 8px;
				font-size: 22px;
				border: 0;
				background: #00bc12;
				color: #fff;
			}
		</style>
	<body> 

		    <input type="button" id="btn" value="获取验证码" onclick="send()" />
		  
	</body>
</html>