JavaScript实现发送验证码倒计时效果

最新推荐文章于 2022-11-30 13:47:36 发布
最新推荐文章于 2022-11-30 13:47:36 发布
阅读量2.4k 收藏 5
点赞数
分类专栏： JavaScript 文章标签： javascript 验证码 计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HerryDong/article/details/103683948
版权

很多网站在注册的时候都会发送验证码到用户的手机上，发送之后会显示倒计时效果，如果超出时间，则点击按钮重新发送，这种效果的实现主要利用了JavaScript中的计时器，其代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发送验证码</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
		<script type="text/javascript" src="bootstrap/js/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	</head>
	<body>
		<div style="margin-left: 400px;margin-top: 400px;">
			<input type="button" id="btn" class="btn btn-info btn-lg" value="获取验证码" />
		</div>

		<script type="text/javascript">
			var button = document.getElementById('btn');
			button.onclick = function() {
				button.disabled = 'disabled';
				var time = 60;
				var timer = setInterval(function() {
					if (time == -1) {
						clearInterval(timer)
						button.disabled = '';
						button.value = '获取验证码';
					} else {
						button.value = time + '秒后重新获取';
						time--;
					}
				}, 1000)
			}
		</script>
	</body>
</html>
发送验证码倒计时效果实现
m0_57712926的博客
09-29 1505
目录前言一、应用场景二、代码演示三、 效果演示总结 前言 今天用@vueuse/core中提供的一个方法，实现发送验证码时倒计时的一个效果。这样的场景使我们经常会见到的，一起来看一下如何实现 一、应用场景 用户选择手机号和验证码登录的时候，往往需要填写手机号后，点击发送验证码来进行后续操作。那么发送验证码的动作应该有一个限制，不然用户一直点击按钮，不但会给用户带来经济损失，也会发送很不必要的请求给后台。 所以对用户点击发送验证码后的按钮，进行一个倒计时的防抖操作是必须的。 二、代码演示 用到的butto
验证码倒计时(js实现)
经验分享
03-25 1038
1.刷新页面时倒计时不会消失，存本地cookie2.不会因为多次页面刷新导致倒计时疯狂累加。
js 发送验证码倒计时
weixin_34319374的博客
06-27 106
首先写一个按钮： <input type="button" id="btn" value="免费获取验证码" onclick="time(this)" /> 然后写js代码： var wait=60; function time(o){ if (wait==0) { o.innerHTML...
jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码...
weixin_30672019的博客
04-22 101
原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
js发送验证码（倒计时）
weixin_30343157的博客
08-29 88
需求：在用户点击获取验证码后60s内不能再次获取 代码 //倒计时60秒 var countdown=60; //显示获取验证码倒计时的文本标签 var _generate_code =$("#btn_send"); //验证码重新获取倒计时 function settime() { if (c...
js实现发送验证码倒计时
ggsafe的专栏
10-24 619
Document 发送验证码 var count; var t; function countdown(){ if (count == 0) { $("#sendCaptcha").text("发送验证码"); $("#sendCaptcha").removeAttr("disabled"); clearTimeout(t);
jQuery实现的手机发送验证码倒计时效果代码分享
10-23
综上所述，本文分享的jQuery实现的手机发送验证码倒计时功能代码，不仅可以让用户在界面上直观地看到等待时间，同时也对手机格式进行了校验，既提高了用户体验，也增强了系统的安全性。通过这种方式，开发者可以很...
jquery实现手机发送验证码的倒计时代码
10-26
本篇将详细介绍如何使用jQuery实现手机发送验证码的倒计时功能。 首先，我们需要一个JavaScript函数来处理倒计时逻辑。以下是一个基本的实现示例： ```javascript // 初始化等待时间 var wait = 60; // time 函数...
js实现点击获取验证码倒计时效果
10-23
在网页开发中，为了确保用户安全并防止恶意行为，通常会在发送验证码功能上设置倒计时机制。当用户点击“获取验证码”按钮后，按钮会变为不可点击状态，并显示剩余的倒计时时间，待时间结束后用户才能再次发送验证码...
js实现发送验证码后的倒计时功能
10-24
本文解决方案的基本思路是点击就将按钮设为disabled,然后根据cookie判断是否设置过期时间,将手机利用ajax提交到后台的发短信接口，就可以了
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
10-21
主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
jQuery实现的手机发送验证码倒计时效果源码.zip
11-18
此压缩包"jQuery实现的手机发送验证码倒计时效果源码.zip"显然包含了一个使用jQuery来实现手机验证码发送后倒计时功能的示例代码。 验证码是网络安全中的一个重要组成部分，它常用于验证用户身份，防止恶意机器人或...
js实现发送验证码倒计时效果
weixin_30254435的博客
11-23 92
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #btnyzm { background: #3...
发送验证码倒计时
m0_58654936的博客
08-10 1833
前端后端 实现验证码倒计时逻辑
js验证码倒计时
m0_65690596的博客
11-30 476
【代码】js60s验证码倒计时。
js发送验证码倒计时效果
weixin_35654814的博客
01-09 278
HTML代码 <div id="code-div"><span id="code-text">获取验证码</span></div> JS代码 var timer;//定时器 var time = 6;//倒计时时间 var isUse = false;//阻止按钮重复点击 $(function(){ //获取验证码 $...
点击发送验证码的倒计时
boKeB1
05-24 480
借鉴于https://blog.csdn.net/skye_95/article/details/81663957 var InterValObj; //timer变量，控制时间 var count = 60; //间隔函数，1秒执行 var curCount; //当前剩余秒数 //发送短信验证码 function sendMessage() { ...
html5+js实现发送验证码倒计时60秒限制
最新发布
06-09
好的，这是一个比较常见的需求，我可以为您提供一个简单的实现方法。 首先，在 HTML 中添加一个按钮和一个显示倒计时的元素： ```html <button id="send-btn">发送验证码</button> <span id="countdown"></span> ``` 接着，在 JavaScript 中定义一个倒计时函数和一个点击事件处理函数： ```javascript function countdown() { var seconds = 60; var countdownInterval = setInterval(function() { seconds--; if (seconds <= 0) { clearInterval(countdownInterval); document.getElementById("send-btn").disabled = false; document.getElementById("countdown").textContent = ""; } else { document.getElementById("countdown").textContent = "(" + seconds + "秒)"; } }, 1000); } document.getElementById("send-btn").addEventListener("click", function() { this.disabled = true; countdown(); }); ``` 当用户点击发送按钮时，按钮将被禁用，倒计时函数将被调用。在倒计时函数中，通过 `setInterval` 函数每隔一秒更新一次倒计时数字，并判断是否倒计时结束。当倒计时结束时，按钮将重新启用，倒计时数字将被清空。 这就是一个简单的发送验证码倒计时60秒限制的实现方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值