jQuery点击获取验证码倒计时

最新推荐文章于 2025-04-04 17:41:23 发布

s2kzzZ

最新推荐文章于 2025-04-04 17:41:23 发布

阅读量198

点赞数

分类专栏： jQuery JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_45733780/article/details/112941181

版权

jQuery 同时被 2 个专栏收录

8 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文展示了如何利用jQuery实现一个简单的获取验证码按钮的倒计时功能。当用户点击按钮后，按钮将禁用，并开始60秒倒计时，在倒计时期间改变按钮的文字和样式。倒计时结束后，按钮恢复启用并恢复原始文字和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jq点击获取验证码倒计时

在这里插入图片描述

<div class="input">
	<input type="text" name="" id="" />
	<button class="getCode">获取验证码</button>
</div>

// 引入jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

// 点击获取验证码
$('.getCode').click(function() {
	let count = 60;
	const countDown = setInterval(() => {
		if (count === 0) {
			$('.getCode').text('重新发送').removeAttr('disabled');
			$('.getCode').css({
				background: '#497bdb',
				color: '#fff',
			});
			clearInterval(countDown);
		} else {
			$('.getCode').attr('disabled', true);
			$('.getCode').css({
				background: '#d8d8d8',
				color: '#707070',
			});
			$('.getCode').text(count + 's');
		}
		count--;
	}, 1000);
});