重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jQuery如何实现倒计时重新发送短信验证码功能

小编给大家分享一下jQuery如何实现倒计时重新发送短信验证码功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联专注于台安企业网站建设,成都响应式网站建设公司,商城网站建设。台安网站建设公司,为台安等地区提供建站服务。全流程按需规划网站,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

具体如下:






var countdown=60;
function settime(obj) {
  if (countdown == 0) {
    obj.removeAttribute("disabled");
    obj.value="免费获取验证码";
    countdown = 60;
    return;
  } else {
    obj.setAttribute("disabled", true);
    obj.value="重新发送(" + countdown + ")";
    countdown--;
  }
setTimeout(function() {
  settime(obj) }
  ,1000)
}




实践例子:



  
    
    
    抢占iPhone7专属预订名额
    
  
  
    
      
    
    上市时间同步发售首批新苹果30个预订专属名额                                                                                            
                             

恭喜提交成功

        分享一下,安抚激动的心

      
          $(function(){     //提交表单     $("#activityForm").Validform({       btnSubmit:"#confirm",       tiptype:function(msg){         if(msg != '' && msg!='通过信息验证!'){           alert(msg);         }       },       tipSweep:true,       beforeSubmit:function(){         saveForm();         return false;       }     });   });   //只允许在APP内打开   function isMobile(){     var u = navigator.userAgent;     var mobileFlag = u.indexOf('type/tfbrowser') > -1;     return mobileFlag;   }   //手机号码验证   $("#mobilePhone").blur(function(){     var mobilePhone =$("#mobilePhone").val();     var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;     if(mobilePhone){       if(!myreg.test(mobilePhone)){         alert("请输入有效的手机号码!");         $("#mobilePhone").val("");         return ;       }     }   });   //发送短信验证码   $("#num").click(function(){     var mobilePhone =$("#mobilePhone").val();     var url="/wamei/activityController/sendValidCode.htm";     if(!mobilePhone){       alert("请输入您的手机号码!");       return ;     }     var mark = $("#num").attr("mark");     if("1"==mark){       settime(this);       $.post(url,{mobilePhone:mobilePhone},function(html){         var data = eval("("+html+")");         if(data && data.statusCode==1){           console.log("send success!");           alert("短信验证码已发送,请查收!");         }else{           alert(data.msg);         }       });     }   });   //提交form表单   function saveForm(){     $("#activityForm").ajaxSubmit({       //data: {'columnStr':columnStr},       type: 'post',       async: false,       success: function($data) {         var data = eval("("+$data+")");         if(data && data.statusCode==1){           $("#success").show();         }else{           alert(data.msg);           $("#mobilePhone").val("");         }       }     });   }   $(".close").click(function(){     $("#success").hide();     window.location.reload();   })   //短信后倒计时   var countdown=60;   function settime(obj) {     if (countdown == 0) {       $(obj).attr("disabled",false);       $(obj).attr("mark","1");       $(obj).html("获取验证码");       countdown = 60;       return;     } else {       $(obj).attr("disabled", true);       $(obj).attr("mark","0");       $(obj).html("重新发送(" + countdown + ")");       countdown--;     }     setTimeout(function() {           settime(obj) }         ,1000)   } // $("#confirm").click(function(){ //   $("#success").show(); // })

以上是“jQuery如何实现倒计时重新发送短信验证码功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


文章标题:jQuery如何实现倒计时重新发送短信验证码功能
文章分享:http://cqcxhl.cn/article/gjoohe.html