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

本文实例讲述了jQuery实现倒计时重新发送短信验证码功能的方法。分享给大家供大家参考，具体如下：

<！DOCTYPE html><html><head><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">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）}</script><body><input type="button" id="btn" value="免费获取验证码" onclick="settime（this）" /></body></html>

实践例子：

<！DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>抢占iPhone7专属预订名额</title><link rel="stylesheet" href="getiphone.css" /></head><body style="width: 100%;height: 100%;background:#fff url（iponeImg/beijing.png） no-repeat center fixed;background-size:100% 100%;text-align: center;"><div class="top"><img src="iponeImg/wenan.png" /></div><h1 class="title"><span></span>上市时间同步发售<span></span><br />首批新苹果30个预订专属名额</h1><form id="activityForm" class="form-horizontal" method="post" action="/wamei/activityController/save.htm"><label><span><img src="iponeImg/yonghu.png" /></span><i></i><input type="text" class="inline-input" id="name" name="name" placeholder="请输入您的真实姓名" datatype="*1-20" errormsg="姓名最多20个中英文字符！" nullmsg="请输入您的真实姓名！" /></label><label><span><img src="iponeImg/dianhua.png" /></span><i></i><input type="text" class="inline-input" id="mobilePhone" name="mobilePhone" placeholder="请输入您的手机号码" datatype="*" errormsg="请输入您的手机号码！" nullmsg="请输入您的手机号码！" /></label><label><span><img src="iponeImg/yanzhengma.png" /></span><i></i><input type="text" id="validateCode" class="inline-input" name="validateCode" placeholder="验证码" datatype="*" errormsg="请输入验证码！" nullmsg="请输入验证码！" style="width:180px;" /><a id="num" mark="1" >获取验证码</a></label><label id="get"><input id="confirm" type="submit" value="提交抢占名额" /></label><label><a href="/wamei/pages/activity/details.html" id="activity">查看活动详情</a></label></form><div class="bottom"><span></span><img src="iponeImg/logo.png" /><span></span></div><div id="success"><div class="successImg"><a class="close"></a><p><img src="iponeImg/chenggong.png" />恭喜提交成功</p><p style="padding-top: 0px;font-size: 23px;">分享一下，安抚激动的心</p></div></div></body></html><！-- scripts --><script src="/wamei/pages/js/jquery.min.js"></script><script src="/wamei/pages/js/jquery.form.js"></script><script src="/wamei/pages/js/bootstrap.min.js"></script><script src="/wamei/pages/js/Validform_v5.3.2.js"></script><script type="text/javascript">$（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（）;// }）</script>

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery日期与时间操作技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格（table）操作技巧汇总》、《jquery中Ajax用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。