js 短信验证码倒计时效果
2015-06-03 17:41
627 查看
<div class="input-group" id="login_do"> <input type="num" class="form-control inputD" id="telCode" placeholder="短信验证码"/> <span class="input-group-addon input-span-black" style="display:none">120s后重新获取</span> <span class="input-group-addon input-span-white"> </span> <a href="javascript:void(0)" id="getCaptcha" class="input-group-addon input-span-orange">获取短信验证码</a> <input type="hidden" value="1" name="start" id="start" /> <span class="input-group-addon input-span-white"> </span> </div>
<script type="text/javascript"> var start = document.getElementById('start').value; var getCaptcha = document.getElementById('getCaptcha'); var login_do = document.getElementById('login_do') ; start = 0; $(function(){ if(start == 1){ startExcute(); } }) var wait = 120; function timeCaptcha(obj) { if (wait == 0) { obj.setAttribute("disabled", false); obj.innerHTML="重新发送"; login_do.style.background = "#ff7c8a"; login_do.style.boxShadow = "0 5px 0 0 #e9717e"; getCaptcha.style.color = "#fff"; wait = 120; } else { obj.innerHTML= wait + "秒后重新发送"; obj.setAttribute("disabled", true); wait--; setTimeout(function() { timeCaptcha(obj) }, 1000); getCaptcha.onclick = null; } if( obj.innerHTML == "重新发送"){ getCaptcha.onclick = function (){ obj.innerHTML= wait + "秒后重新发送"; login_do.style.background = "#dbdbdb"; login_do.style.boxShadow = "0 5px 0 0 #cbcbcb"; getCaptcha.style.color = "#000"; //obj.setAttribute("disabled", true); setTimeout(function() { timeCaptcha(obj) }, 1000); getCaptcha.onclick = null; reSendCaptcha(); } } } getCaptcha.onclick = function (){ timeCaptcha(this); } function startExcute(){ getCaptcha.innerHTML= wait + "秒后重新发送"; getCaptcha.setAttribute("disabled", true); wait--; setTimeout(function() { timeCaptcha(getCaptcha) }, 1000); getCaptcha.onclick = null; } function reSendCaptcha(){ var phone = $("#phone").val(); var url = "{:U('Register/ajaxSendCode')}"; $.post(url,{phone:phone},function(data){ /*alert(data) if(data.error != 0 ){ showAlert("zhezhao2","showDiv2","zhe2"); }*/ },'json'); return false; }
本文出自 “天南一方” 博客,请务必保留此出处http://phpnan.blog.51cto.com/2641199/1657991
相关文章推荐
- js的三种继承方式及其优缺点
- js双轴柱状图
- RapidJSON 代码剖析(三):Unicode 的编码与解码
- web.xml jsp config标签使用详解
- js数字或字母的正则表达式
- 金额与数字转化常用实用几个JS方法
- js 设计模式-接口
- js 表单不为空,数字长度验证
- Js瀑布流-自适应宽度
- Js瀑布流-自适应宽度
- js刷新页面方法大全
- JS在IE和FF下不兼容的问题及部分解决办法
- 201506022038_《JavaScript权威指南》(p48-58)
- js柱状图
- 55 js div高度无法取得!
- JSTL应用总结
- js 框架
- jsp关于 “注释”、“编码”
- js手机横竖屏判断
- Html表格全选对应的javascript