<script type="text/javascript" src="/skin/js/TimerButton.js"></script>
<script>
function login(_this) {
if(!$('#xieyi').is(':checked')){
msg("请阅读并同意《隐私政策》和《注册协议》");
return false;
}
return form_submit(_this);
}
$(function (){
var mobile = $("#mobile");
var btn = "#getcode";
timerButton.verify(btn, {
time: 60,
event: "click",
condition: function () {
var phoneReg = /^((1[0-9]{2})+\d{8})$/,
flag = phoneReg.test(mobile.val());
if(!flag){
popmsg("电话号码填写不正确！");
return false;
}
return true;
},
unableClass: "disabled", //按钮不能使用时的class
runningText: "s后重新获取", //计时正在进行中时按钮显示的文字
timeUpText: "重新获取" ,
progress:function(time){ //计时正在进行中时的回调
$(btn).html(time + "s后重新获取");
},
timeUp:function(time){
$(btn).html("重新获取");
},
abort:function () {
$(btn).html("重新获取");
},
eventFn:function () {
$.post("/api/sms/send",{ mobile:mobile.val(),event:"mobilelogin"},function(data,status){
if(data.code==1){
msg(data.msg)
}else{
msg(data.msg)
$(btn)[0].timedown.abort()
}
});
console.log("执行了");
console.log(this);
}
});
});下载：http://blog.dj5.cn/uploads/20230116/65f4217b1f2af477d698c806a7370ccd.zip
演示：
<!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;
}
.getverify-code-btn.unabled{
background-color: lightblue;
color: #eee;
cursor: default;
}
</style>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="TimerButton.js"></script>
<script type="text/javascript">
$(function (){
/*TimerButton是一个对象，该对象中有两个方法，一个是SecondCountDown，该方法的作用是精确倒计时。普通的使用setInterval倒计时会存在一定的偏差，特别是当我们切换窗口时，而SecondCountDown解决了这个误差问题（具体用法见timedown.html）。
另一个方法是verify，该方法的作用是实现按钮倒计时的功能，有了这个按钮倒计时就可以实现获取验证码倒计时的功能*/
console.log(timerButton);
var btn = $("#j_getVerifyCode");
timerButton.verify("#j_getVerifyCode", {
time: 60,//倒计时时间
event: "click",//事件触发方式
//执行条件，可以是function也可以是Boolean值，如果是函数则需返回true才会执行
condition: function () {
var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
flag = phoneReg.test($("#j_phone").val());
if(!flag){
alert("电话号码填写不正确！");
return false;
}
return true;
},
unableClass: "unabled",//按钮不能使用时的class
runningText: " s后重新获取",//计时正在进行中时按钮显示的文字
timeUpText: "重新获取",//时间到了时按钮显示的文字
progress: function (time) {//计时正在进行中时的回调
btn.html(time + " s后重新获取");
console.log(this);//这里的this指向按钮
console.log(this.timedown);//这个timedown就是计时器
},
timeUp: function (time) {//计时结束时执行的回调
btn.html("重新获取");
console.log("时间到了！");
console.log(this);//这里的this指向按钮
},
abort: function () {//中断计时
btn.html("重新获取");
console.log("我被中断了！");
console.log(this);//这里的this指向按钮
},
eventFn: function () {//事件执行后的回调
console.log(this);
console.log("执行了");
console.log(this);//这里的this指向按钮
}
});
//中断计时
$("#abort_btn").on("click", function (){
document.getElementById("j_getVerifyCode").timedown.abort();
});
});
</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>
<button type="button" id="abort_btn">中断计时</button>
</div>
</body>
</html>
发表评论 取消回复