短信验证码的倒计时实现:

来源:互联网 发布:阿朵拉 淘宝店 编辑:程序博客网 时间:2024/05/16 10:36

在后台实现了定时删除session中的短信验证码后,需要在前台给用户展示他所剩余的时间,就写了如下的代码:

<script type="text/javascript">$(function(){var InterValObj ; //timer变量,控制时间var count = 120;//剩余时间var curCount ;//当前剩余时间function SetRemainTime(){if (curCount == 0) { console.log(curCount);window.clearInterval(InterValObj);// 停止计时器$("input[name='btnSendCode']").removeAttr("disabled");// 启用按钮$("input[name='btnSendCode']").val("重新发送验证码");}else {curCount--;console.log(curCount+"abc");console.log(typeof curCount);$("input[name='btnSendCode']").val("请在" + curCount + "秒内输入验证码");}}//点击发送请求$("input[name='btnSendCode']").click(function(){curCount=count;//将按钮设置为不可用的$("input[name='btnSendCode']").attr("disabled",true);$("input[name='btnSendCode']").val("请在" + curCount + "秒内输入验证码"); // 启动计时器,1秒执行一次InterValObj = window.setInterval(SetRemainTime, 1000);var phone = $("input[name='phone']").val();$.getJSON("${pageContext.request.contextPath}/user.do?method=sendMsg",{"phone":phone},function(data){alert("1");//根据结果调整页面效果if(data.result){//发送成功alert("2");}else{//发送失败alert("3");}});});});</script>

<tr>            <th>短信验证码<em>*</em></th>            <td>            <input name="msg" type="text" class="dl_text" value="" style="width:145px;"/>            <span>            <input type="button"  name="btnSendCode" value="免费获取验证码" disabled="disabled" />            </span>            </td>            <td><span class="msg-box" for="msg"></span></td>          </tr>


以上的代码实现向后台发送请求,并在前台实现倒数计时的功能。
代码参考了来自迷彩风情的博客,:http://blog.csdn.net/sxdtzhaoxinguo/article/details/34437591,但我还是说这是我的原创。。。稍(xue)微(wei)无耻

0 0
原创粉丝点击