js 短信验证码倒计时效果

标签：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;
	}

本文出自 “天南一方” 博客，请务必保留此出处http://phpnan.blog.51cto.com/2641199/1657991

js 短信验证码倒计时效果

标签：js 短信验证码倒计时效果

原文地址：http://phpnan.blog.51cto.com/2641199/1657991