jQuery如何实现倒计时重新发送短信验证码功能-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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://scyingshan.cn/article/gjoohe.html

新闻中心

其他资讯