【JavaScript】实现点击获取验证码按钮后60s倒计时

最新推荐文章于 2024-05-02 18:12:22 发布

1024A

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量5.1k

点赞数 6

分类专栏： JavaScript 前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_58309844/article/details/126483687

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 1 订阅

订阅专栏

JS实现点击获取验证码按钮后60s倒计时

文章目录

一、先看一下效果吧
二、实现代码

提示：以下是本篇文章正文内容，下面案例可供参考

一、先看一下效果吧

在这里插入图片描述

二、实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input {
				height: 36px;
				line-height: 36px;
				border: 1px solid lightgray;
				color: #666666;
				width: 160px;
				text-indent: 10px;
			}

			button {
				width: 120px;
				height: 36px;
				font-size: 14px;
				text-align: center;
				background: #FF8D28;
				border: none;
				color: #fff;
				border-radius: 3px;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<input type="text" placeholder="请输入短信验证码" /><button id="count">获取验证码</button>
		<script>
			var _count = document.getElementById("count"); //获取验证码按钮
			var time = 59;
			// 注册单击事件
			_count.addEventListener('click', function() {
				// 禁用按钮
				_count.disabled = true;
				// 开启定时器
				var timer = setInterval(function() {
					// 判断剩余秒数
					if (time == 0) {
		 			// 清除定时器和复原按钮
						clearInterval(timer);
						_count.disabled = false;
						_count.innerHTML = '获取验证码';
					} else {
						_count.innerHTML = `${time}秒后重新获取`;
						time--;
					}
				}, 1000);
			});
		</script>
	</body>
</html>