<ul class="ulist"><li class="group"><label class="label" for="phone">聯系電話：</label><div class="controls"><input type="text" id="phone" class="txt"></div></li><li class="group"><label class="label" for="code">驗證碼：</label><div class="controls"><input type="text" id="code" class="txt"><button class="btn btn-small get-code" onclick="getCode(this)" id="J_getCode">獲取驗證碼</button><button class="btn btn-small reset-code" id="J_resetCode" style="display:none;"><span id="J_second">60</span>秒后重發</button></div></li> </ul> /*獲取驗證碼*/ var isPhone = 1; function getCode(e){checkPhone(); //驗證手機號碼if(isPhone){resetCode(); //倒計時}else{$('#phone').focus();}} //驗證手機號碼 function checkPhone(){var phone = $('#phone').val();var pattern = /^1[0-9]{10}$/;isPhone = 1;if(phone == '') {alert('請輸入手機號碼');isPhone = 0;return;}if(!pattern.test(phone)){alert('請輸入正確的手機號碼');isPhone = 0;return;} } //倒計時 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); }

?

轉載于:https://www.cnblogs.com/BearLee/p/8337444.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。