<ul class="ulist"><li class="group"><label class="label" for="phone">聯(lián)系電話：</label><div class="controls"><input type="text" id="phone" class="txt"></div></li><li class="group"><label class="label" for="code">驗(yàn)證碼：</label><div class="controls"><input type="text" id="code" class="txt"><button class="btn btn-small get-code" onclick="getCode(this)" id="J_getCode">獲取驗(yàn)證碼</button><button class="btn btn-small reset-code" id="J_resetCode" style="display:none;"><span id="J_second">60</span>秒后重發(fā)</button></div></li> </ul> /*獲取驗(yàn)證碼*/ var isPhone = 1; function getCode(e){checkPhone(); //驗(yàn)證手機(jī)號(hào)碼if(isPhone){resetCode(); //倒計(jì)時(shí)}else{$('#phone').focus();}} //驗(yàn)證手機(jī)號(hào)碼 function checkPhone(){var phone = $('#phone').val();var pattern = /^1[0-9]{10}$/;isPhone = 1;if(phone == '') {alert('請(qǐng)輸入手機(jī)號(hào)碼');isPhone = 0;return;}if(!pattern.test(phone)){alert('請(qǐng)輸入正確的手機(jī)號(hào)碼');isPhone = 0;return;} } //倒計(jì)時(shí) function resetCode(){$('#J_getCode').hide();$('#J_second').html('5');$('#J_resetCode').show();var second = 5;var timer = null;timer = setInterval(function(){second -= 1;if(second >0 ){$('#J_second').html(second);}else{clearInterval(timer);$('#J_getCode').show();$('#J_resetCode').hide();}},1000); }

?

轉(zhuǎn)載于:https://www.cnblogs.com/BearLee/p/8337444.html

總結(jié)

以上是生活随笔為你收集整理的【jQuery】手机验证码倒计时效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。