<!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>