js 短信验证码倒计时效果

<div class="input-group" id="login_do">
					<input type="num" class="form-control inputD" id="telCode" placeholder="短信验证码"/>
					<span class="input-group-addon input-span-black" style="display:none">120s后重新获取</span>
					<span class="input-group-addon input-span-white">&nbsp;</span>
					<a href="javascript:void(0)" id="getCaptcha" class="input-group-addon input-span-orange">获取短信验证码</a>
					<input type="hidden" value="1"  name="start" id="start" />
					<span class="input-group-addon input-span-white">&nbsp;</span>
				</div>
<script type="text/javascript">
	    var start = document.getElementById(‘start‘).value;
	    var getCaptcha = document.getElementById(‘getCaptcha‘);
		var login_do   = document.getElementById(‘login_do‘) ;
			start = 0;
	  $(function(){
	    	if(start == 1){
	    		startExcute();
			}
		})

	var wait = 120;

		function timeCaptcha(obj) {
		        if (wait == 0) {
		        	obj.setAttribute("disabled", false);           
		            obj.innerHTML="重新发送";
		            login_do.style.background = "#ff7c8a";
		            login_do.style.boxShadow = "0 5px 0 0 #e9717e";
		            getCaptcha.style.color = "#fff";
		          
		            wait = 120;
		        } else {
		        
		            obj.innerHTML= wait + "秒后重新发送";
		            obj.setAttribute("disabled", true);
		            wait--;
		           
		            setTimeout(function() {
		            	timeCaptcha(obj)
		            },
		            1000);
		            getCaptcha.onclick = null;

		        }
		        if( obj.innerHTML == "重新发送"){
		        	getCaptcha.onclick = function (){

		        		obj.innerHTML= wait + "秒后重新发送";
		        		login_do.style.background = "#dbdbdb";
			            login_do.style.boxShadow = "0 5px 0 0 #cbcbcb";
			            getCaptcha.style.color = "#000";
			            //obj.setAttribute("disabled", true);
			            setTimeout(function() {
			            	timeCaptcha(obj)
			            },
			            1000);
			            getCaptcha.onclick = null;
			            reSendCaptcha();
		        	}
		        
		        }
		    }
		getCaptcha.onclick = function (){
			timeCaptcha(this);
		}

		function startExcute(){
			getCaptcha.innerHTML= wait + "秒后重新发送";
			getCaptcha.setAttribute("disabled", true);
            wait--;
            setTimeout(function() {
            	timeCaptcha(getCaptcha)
            },
            1000);
            getCaptcha.onclick = null;
		}

		function reSendCaptcha(){
			var  phone = $("#phone").val();
			var  url = "{:U(‘Register/ajaxSendCode‘)}"; 
			$.post(url,{phone:phone},function(data){
				/*alert(data)
				  if(data.error != 0 ){
				  	showAlert("zhezhao2","showDiv2","zhe2");
				  }*/
			},‘json‘);

		return false;
	}
时间: 2024-10-13 16:44:34

js 短信验证码倒计时效果的相关文章

js 发送短信验证码倒计时

html <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> js // 短信验证码倒计时var countdown=60;function settime(obj) { if (countdown == 0) { obj.removeAttribute("disabled"); obj.value=&

短信验证码倒计时

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="yan.aspx.cs" Inherits="Technology.yan" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server&

安卓CountDownTimer实现全民夺宝抢购倒计时和短信验证码倒计时

在sina里看到了什么全民夺宝的链接,然后忍不住1元的诱惑被坑了10多块,什么都没有抽到,但是还是有人抽到了不知道是不是坑爹的,然后也就动手做一下倒计时的功能. 先看全民夺宝: 说起这个功能是不是感觉so easy,然后就以此来搞2个倒计时效果,顺便也学习一下CountDownTimer的使用. 哈哈,看看今天实现的效果图: 回顾 常用的倒计时方式 方法一 Timer与TimerTask(Java实现) public class timerTask extends Activity{ priva

Android获取短信验证码倒计时

目前越来越多的app在注册或是进行对应操作时,要求获取短信验证码,在点击了获取短信验证码的按钮后,就是出现倒计时,比如倒计时120S,在倒计时期间内,按钮点击是无效的,当倒计时结束后,如果你没有获取到验证码,可以再次点击.实现倒计时的方法很多,我们今天就通过继承android.os.CountDownTimer类来实现! 首先看下我们封装的倒计时工具类,主要为了在多个地方用到的话,用了多个构造方法,就是为了使用更灵活,只要传入对数就可以调用了: public class MyCountTimer

发送短信验证码 倒计时

1.页面样式:基于bootstrap 1 <div class="form-group"> 2 <label class="col-md-4 control-label">手机号码</label> 3 <div class="col-md-8"> 4 <div class="input-group m-b"> 5 <input class="form-

iOS 短信验证码倒计时按钮的实现

验证码倒计时按钮的应用是非常普遍的,本文介绍了IOS实现验证码倒计时功能,点击获取验证码,进入时间倒计时,感兴趣的小伙伴们可以参考一下: 实现思路: 创建按钮,添加点击方法: 用NSTimer定时器,每秒执行一次,定时改变Button的title,改变Button的样式,设置Button不可点击: 若倒计时结束,定时器关闭,并改变Button的样式,可以点击: 代码如下: 在按钮的点击事件里调用该方法      -(void)openCountdown{ __block NSInteger ti

js短信验证倒计时

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">   *{    margin: 0;    padding: 0;   }   button{    width: 100px;   }  </style>  <script t

js,JQ获取短信验证码倒计时

按钮 <a href="javasript:void(0);"onclick="settime(this);">获取手机验证码</a> 倒计时js <script> var countdown=60; function settime(obj) { if (countdown == 0) { obj.getAttributeNode('onclick').value ="settime(this);"; obj

js获取短信验证码倒计时重新发送的实现方法

<!-- 参数var wait=30;为等待时间30秒,可以根据自身实际情况来设置.当在等待时间内获取不到验证码,可以点击重新获取.--> <script type="text/javascript"> var wait=30; function changetime() { if (wait == 0) { $("#getphcode").attr("disabled","false"); $(&qu