直接上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取手機驗證碼按鈕計時</title>
<style type="text/css">
body,div{
padding: 0;
margin: 0;
}
.wraper{
padding: 100px;
}
.phone{
width: 220px;
height: 40px;
box-sizing: border-box;
outline: none;
padding: 0 10px;
}
.getverify-code-btn{
display: inline-block;
width: 140px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: blue;
border: 1px solid #ccc;
box-sizing: border-box;
vertical-align: middle;
cursor: pointer;
color: #fff;
}
.unlabed{
background-color: lightblue;
color: #eee;
}
</style>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="getVerifyCode.js"></script>
<script type="text/javascript">
$(function (){
//獲取手機驗證碼
$("#j_getVerifyCode").on("click",getVerifyCode({
callBack: function (){//按鈕點擊后的回調函數(shù)，-----必須-----
//在這里你還是可以對你的按鈕進行操作
console.log(this);
alert("驗證碼發(fā)送成功");
},
time: 10,//定時時間，以秒為單位，默認60秒
getCurrentTime: function (time){//獲取倒計時當前時間
console.log(time);
console.log(this);//這里的這個this執(zhí)行按鈕
console.log("=================================");
},
isPhone: true,//是否為發(fā)送手機驗證碼，如果是則會驗證手機號格式，-----必須-----
getPhone: function (){//獲取手機號，此處一定要return
return $("#j_phone").val();
},
//phoneReg: /^1[34578]\d{9}$/,//手機號驗證正則
phoneCallBack: function (){//當手機號有誤時的回調，默認會中止操作
alert("您輸入的手機號有誤");
},
timeIsUpText: "重新發(fā)送",//倒計時時間到了后按鈕所顯示文字
timeRunnigText: "s后重新發(fā)送",//倒計時時間正在走的時候按鈕所顯示文字。默認為"xxs后重新獲取"
unabledClass: "unlabed"http://按鈕不能用的樣式，即點擊按鈕后的樣式
}));
//獲取普通驗證碼
$("#j_timekeeping").on("click",getVerifyCode({
callBack: function (){//按鈕點擊后的回調函數(shù)，-----必須-----
//在這里你還是可以對你的按鈕進行操作
console.log(this);
alert("驗證碼發(fā)送成功");
},
time: 20,//定時時間，以秒為單位
unabledClass: "unlabed"http://按鈕不能用的樣式，即點擊按鈕后的樣式
}));
});
下面是封裝的一個getVerifyCode函數(shù)：
function getVerifyCode(options) {
return function() {
clearInterval(timer);
if(!(options && Object.prototype.toString.call(options.callBack) == "[object Function]")) {
throw new Error("必須傳遞參數(shù)及回調函數(shù)");
}
var that = $(this);
if(options.isPhone){
var phone = options.getPhone(),
reg = options.phoneReg || /^1[3|4|5|7|8][0-9]\d{8}$/;
if(!reg.test(phone)) {
//如果手機號碼不正確，則執(zhí)行手機號碼對應的回調函數(shù)
options.phoneCallBack && options.phoneCallBack.call(that,phone);
return;
}
}
var timer = null,
time = options.time || 60,
unabledClass = options.unabledClass || "",
timeIsUpText = options.timeIsUpText || "重新獲取",
timeRunnigText = options.timeRunnigText || " s后重新獲取";
that.off("click");
that.addClass(unabledClass);
timer = setInterval(function() {
//避免重復發(fā)送
if(time <= 0) {
clearInterval(timer);
/*time = 60;*/
that.html(timeIsUpText).removeClass(unabledClass);
that.on("click", getVerifyCode(options));
} else {
time--;
that.html(time + timeRunnigText);
//在外部可以獲取到倒計時當前時間
if(options.getCurrentTime && (Object.prototype.toString.call(options.getCurrentTime) == "[object Function]")){
options.getCurrentTime.call(that,time);
}
}
}, 1000);
//執(zhí)行回調函數(shù)
options.callBack.call(that);
}
}
</script>
</head>
<body>
<div class="wraper">
<h1>獲取手機驗證碼</h1>
<input type="text" id="j_phone" class="phone">
<div id="j_getVerifyCode" class="getverify-code-btn">獲取手機驗證碼</div>
</div>
<div class="wraper">
<h1>獲取普通驗證碼</h1>
<div id="j_timekeeping" class="getverify-code-btn">獲取驗證碼</div>
</div>
</body>
</html>
