<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机验证码</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="js/jquery.cookie.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container phone">
        <div class="banner">
            <img src="images/bind-mobile.jpg" alt="">
        </div>
        <div class="register-form">
			<ul>
				<li class="rf1">
					<input id="mobile" type="text" name="number" placeholder="手机号">
				</li>
				
				<li class="rf4">
					<input type="text" name="yzm" placeholder="验证码">
					<input id="getting" type="button" value="获取验证码">
				</li>
				<li class="rf5">
					<input type="submit" value="确定">
				</li>
			</ul>
        </div>
    </div>
</body>
</html>
<script>
	$(function(){
		/*仿刷新:检测是否存在cookie*/
		if($.cookie("captcha")){
			var count = $.cookie("captcha");
			var btn = $('#getting');
        		btn.val(count+'秒后刷新').attr('disabled',true).css('cursor','not-allowed');
        		var resend = setInterval(function(){
		        	count--;
		        	if (count > 0){
		            	btn.val(count+'秒后刷新').attr('disabled',true).css('cursor','not-allowed');
		            	$.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
		        	}else {
		        		clearInterval(resend);
		       	 		btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');
		        	}
		    	}, 1000);
		}

		/*点击改变按钮状态,已经简略掉ajax发送短信验证的代码*/
		$('#getting').click(function(){
			if($('#mobile').val()==""){
			    	alert('请输入手机号');
			}else{
				var btn = $(this);
				var count = 60;
	        		var resend = setInterval(function(){
			        	count--;
			        	if (count > 0){
			            	btn.val(count+"秒后刷新");
			            	$.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
			        	}else {
			        		clearInterval(resend);
			       	 		btn.val("获取验证码").removeAttr('disabled style');
			        	}
			    	}, 1000);
		    		btn.attr('disabled',true).css('cursor','not-allowed');
			}
		});

	});
	
</script>

  

posted on 2018-02-08 22:51  FreeSpider  阅读(153)  评论(0编辑  收藏  举报