您的位置:首页 > Web前端 > JavaScript

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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: