`
annan211
  • 浏览: 460964 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js 获取验证码倒计时

 
阅读更多
点击通过手机或邮箱获取验证码,点击之后进入手机验证码或者邮箱验证码获得的页面,验证码已经发出。需要在页面上出现倒计时,可参照如下代码。
  var wait=60;
	var logNum = Math.floor(Math.random() * 60 + 1);
	function time(o,num) {
			if (wait == 0) {
				o.removeAttribute("disabled");			
				o.value="再次免费获取验证码";
				wait = 60;
			} else {
				o.setAttribute("disabled", true);
				o.value="重新发送(" + wait + ")";
				if(wait==logNum){
					resend();
				}
				wait--;
				setTimeout(function() {time(o,wait);},1000);
			}
		}
	document.getElementById("btn").onclick=function(){time(this,null);}
	
	var maxtime = 60; 
	function CountDown(){  
		if(maxtime>=0){  
				document.all["btn"].setAttribute("disabled", true);
				seconds = Math.floor(maxtime%60);
				msg = "重新发送("+seconds+")";  
				document.all["btn"].value = msg;  
				--maxtime;  
		}  
		else{  
				clearInterval(timer); 
				msg = "重新发送";
				document.all["btn"].value = msg; 
				document.all["btn"].removeAttribute("disabled");
			}  
		}  
	timer = setInterval("CountDown()",1000); 
 
分享到:
评论

相关推荐

    小程序获取验证码倒计时

    本资源提供了一个小程序获取验证码倒计时的实现,适用于登录和注册场景。 首先,我们需要理解小程序的基本结构。微信小程序是由页面(Page)和全局配置(App)组成的,每个页面包含 WXML、WXSS(类似 CSS)、...

    js短信验证码倒计时(页面刷新无效)

    本文将深入探讨如何实现一个js短信验证码倒计时功能,同时确保在页面刷新后倒计时状态能够保持。 首先,我们需要理解验证码发送和倒计时的基本逻辑。当用户点击获取验证码按钮时,前端会向后端发送请求,请求发送...

    countdown倒计时获取验证码倒计时

    "countdown倒计时获取验证码倒计时"这个标题指的是利用JavaScript来实现一个特定的功能,即在用户点击获取验证码按钮后,显示一个倒计时,让用户知道他们何时能够再次发送验证码。这一功能增强了用户体验,防止了...

    JS 实现获取验证码 倒计时功能

    JS实现获取验证码倒计时功能的知识点包括如下几个方面: 1. HTML标签使用:文档中使用了`<button>`标签来创建一个按钮,按钮的样式通过内嵌的CSS代码进行定义。按钮在初始状态下可点击,并且通过`onclick`属性为...

    jquery验证码倒计时

    `startCountdown` 函数使用 `setInterval` 定时器每秒更新倒计时,当倒计时结束时,恢复按钮文本并重新获取验证码。`$('#refreshCaptcha').on('click'...` 为“获取验证码”按钮添加点击事件,触发倒计时和验证码...

    react-react验证码倒计时组件

    3. **事件处理**:当用户点击发送验证码按钮时,会触发一个事件处理函数,该函数启动倒计时并可能向服务器发送请求以获取验证码。 4. **定时器**:为了实现倒计时效果,我们可以使用`setInterval`函数,每隔一定...

    发送验证码倒计时.rar

    验证码倒计时通常在用户请求获取验证码后启动,它限制了用户在短时间内重新发送验证码的次数,比如60秒内只能发送一次。这样可以有效避免攻击者通过自动化工具对系统进行暴力尝试,同时也能提高用户体验,让用户明确...

    vueJS+bootstrap+html5验证码倒计时

    在实现VueJS验证码倒计时功能时,我们首先需要一个用于显示验证码的区域,通常会包含一个按钮,用户点击后触发获取验证码的请求,并启动倒计时。这里,我们可以利用HTML5的`<button>`元素配合VueJS的`v-on`指令来...

    JQ实现手机验证码倒计时

    通过这个功能,用户在获取验证码后将无法立即再次发送,而是必须等待一段时间,通常为60秒。 首先,确保在页面中引入了jQuery库,因为整个实现过程依赖于它。这可以通过添加以下代码到HTML文档的`<head>`部分来完成...

    获取短信验证码倒计时

    同时,前端会启动一个定时器,通常是一个JavaScript的`setTimeout`函数,设置一个特定时间(例如60秒)后触发倒计时结束事件。 在前端实现这一功能,我们主要使用HTML、CSS和JavaScript。`index.html`文件通常包含...

    jQuery表单验证与表单美化手机发送验证码倒计时插件

    `jquery-1.8.3.min.js`是jQuery的核心库,它提供了AJAX功能,可以用来发送请求到服务器获取验证码。前端倒计时一般通过定时器(`setInterval`)实现,每秒更新剩余时间,直到达到预设限制,如60秒。 最后,**倒计时...

    23-01 好看的输入信息--获取验证码倒计时(倒计时封装的很好).rar

    在IT行业中,用户界面的设计与用户体验紧密相连,而“好看的输入信息--获取验证码倒计时”这个主题就涉及到了这两个重要的方面。在这个压缩包文件中,我们主要关注两个知识点:一是个人信息录入界面的设计,二是倒...

    js设置手机获取验证码后按钮倒计时

    js设置手机获取验证码后按钮倒计时,页面发送验证码后显示倒计时60秒demo,逻辑很简单,参考后可以自己设置 称需要的倒计时间,及显示内容

    vue获取验证码倒计时组件

    ### Vue获取验证码倒计时组件知识点详解 #### 1. Vue组件基础 在详细解析“Vue获取验证码倒计时组件”之前,我们需要了解Vue组件的基础概念。Vue组件是Vue.js框架中实现代码复用和模块化开发的核心单元。组件可以...

    jQuery手机号码获取验证码60秒倒计时表单代码

    在JavaScript中,可以使用`setInterval`函数每秒更新显示的剩余时间,同时禁用获取验证码按钮,待倒计时结束恢复。 6. **CSS样式**:压缩包中的`css`文件负责设置界面的布局和样式,使得表单具有良好的视觉效果和...

    jquery表单中获取短信验证码倒计时

    4. 倒计时结束后,重新启用获取验证码按钮。 核心代码主要包括以下几个部分: **HTML部分:** ```html 请输入手机号"> 获取验证码 ``` 这里的`<button>`是用于触发获取验证码的元素,它的ID是`getSmsCode`。 ...

    js实现点击获取验证码倒计时效果

    总的来说,JavaScript实现的点击获取验证码倒计时功能是通过`setInterval`和`clearInterval`这两个核心函数来控制时间的流逝和倒计时结束后的操作。理解并掌握这一技术,对于前端开发者来说是非常实用的。

    微信小程序验证码倒计时

    - 在 JS 文件中,你需要编写获取验证码的函数,该函数通常会触发一个网络请求,向服务器发送请求以获取验证码。成功获取后,启动倒计时。 - 倒计时函数可以使用 `setInterval`,但为了防止精度问题,推荐使用 `...

    验证码倒计时最简demo

    2. **发送验证码**:当用户请求获取验证码时,服务器将验证码通过网络发送到客户端,通常是通过HTTP响应或者WebSocket实时推送。 3. **显示验证码**:客户端接收到验证码后,将其显示在界面上供用户查看。同时,也...

Global site tag (gtag.js) - Google Analytics