当前位置:Gxlcms > html代码 > jQuery手机验证码倒计时效果

jQuery手机验证码倒计时效果

时间:2021-07-01 10:21:17 帮助过:104人阅读

比较常用的一种效果,当点击获取手机验证码之后,会有一个倒计时的效果,一般是60秒开始到0就变为“获取验证码”,下面以5秒动画图片示例:

jQuery手机验证码倒计时效果


HTML代码

  1. <ul class="ulist">
  2. <li class="group">
  3. <label class="label" for="phone">联系电话:</label>
  4. <div class="controls">
  5. <input type="text" id="phone" class="txt">
  6. </div>
  7. </li>
  8. <li class="group">
  9. <label class="label" for="code">验证码:</label>
  10. <div class="controls">
  11. <input type="text" id="code" class="txt">
  12. <button class="btn btn-small get-code" onclick="getCode(this)" id="J_getCode">获取验证码</button>
  13. <button class="btn btn-small reset-code" id="J_resetCode" style="display:none;"><span id="J_second">60</span>秒后重发</button>
  14. </div>
  15. </li>
  16. </ul>
jQuery代码:


  1. /*获取验证码*/
  2. var isPhone = 1;
  3. function getCode(e){
  4. checkPhone(); //验证手机号码
  5. if(isPhone){
  6. resetCode(); //倒计时
  7. }else{
  8. $('#phone').focus();
  9. }
  10. }
  11. //验证手机号码
  12. function checkPhone(){
  13. var phone = $('#phone').val();
  14. var pattern = /^1[0-9]{10}$/;
  15. isPhone = 1;
  16. if(phone == '') {
  17. alert('请输入手机号码');
  18. isPhone = 0;
  19. return;
  20. }
  21. if(!pattern.test(phone)){
  22. alert('请输入正确的手机号码');
  23. isPhone = 0;
  24. return;
  25. }
  26. }
  27. //倒计时
  28. function resetCode(){
  29. $('#J_getCode').hide();
  30. $('#J_second').html('5');
  31. $('#J_resetCode').show();
  32. var second = 5;
  33. var timer = null;
  34. timer = setInterval(function(){
  35. second -= 1;
  36. if(second >0 ){
  37. $('#J_second').html(second);
  38. }else{
  39. clearInterval(timer);
  40. $('#J_getCode').show();
  41. $('#J_resetCode').hide();
  42. }
  43. },1000);
  44. }




人气教程排行