貼代碼之前,我們先講一下這裡我們用到的技術主要有1個。setInterval(),這個方法可以實作倒計時的效果。
css:
.weui_btn_disabled.weui_btn_default {
color: #C9C9C9;
border: 1px solid #C9C9C9;
}
.weui_btn_disabled.weui_btn_default {
color: #C9C9C9;
}
.weui_btn_plain_primary {
color: #04BE02;
border: 1px solid #04BE02;
}
.weui_btn_disabled {
color: rgba(255,255,255,.6);
}
html:
<div class="weui_cell">
<div class="weui_cell_hb">
<label class="weui_label">驗證碼</label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input oninput="check_finish()" type="text" placeholder="請輸入驗證碼" class="weui_input <if condition='$vo.is_need eq 1'> is_must</if>" id="code" name="code"/>
</div>
<div class="weui_cell_ft register_code">
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_plain_primary" id="get_code_btn" style="display: none;" >發送驗證碼</a>
</div>
</div>
js:
$('#get_code_btn').click(function(){
var phone = $('#phone').val(); //擷取輸入的手機号碼
if(!$('#get_code_btn').hasClass('weui_btn_default')){ //判斷是否有這個class名字
$.Dialog.loading();
var reg_phone = /1\d{10}/;
if(!reg_phone.test(phone)){ //驗證手機是否符合格式
$.Dialog.fail("填寫手機号");
return false;
}
$('#get_code_btn').addClass('weui_btn_disabled weui_btn_default');
$('#get_code_btn').removeClass('weui_btn_plain_primary');
$.post(get_code_url,{phone:phone}, //發起請求
function(data){
if(data.result==1){
$.Dialog.success("發送成功");
var leftTime = 60;
var timer = setInterval(function(){ //倒計時
$('#get_code_btn').text(leftTime+'秒');
leftTime--;
if(leftTime==0){ //重新發送
clearInterval(timer);
$('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新擷取');
$('#get_code_btn').addClass('weui_btn_plain_primary');
}
},1000);
}else{
$('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新擷取');
$('#get_code_btn').addClass('weui_btn_plain_primary');
alert(data.msg);
$.Dialog.close();
//$.Dialog.fail(data.msg);
}
}
).error(
function(){ //發送失敗
$('#get_code_btn').removeClass('weui_btn_disabled weui_btn_default').text('重新擷取');
$('#get_code_btn').addClass('weui_btn_plain_primary');
$.Dialog.fail("系統繁忙");
}
);
}
});
如果大家有更好的方法,大家多多讨論