最近涛哥做的项目用到了短信验证码功能,需点发送后,倒计时60秒后才能再次发送。
直接上代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
//获取验证码 $('#send-code').live("click", function(){ var phone; var curcount = 60; var InterValObj; phone = $('#reg-phone').val(); //验证手机号是否正确 //发送验证码 $.get('/getcode',{ phone: phone }, function(data){ alert(data); }); //获取验证码倒计时 8秒后重新获取 $('#send-code').attr( 'disabled','disabled' ); $('.getCode').css({"backgroundColor":"#c3c3c3"}); $('#send-code').text( + curcount + "秒后重新获取" ); InterValObj = setInterval( countdown ,1000 ); //60秒倒计时 function countdown(){ if(curcount == 0){ clearInterval( InterValObj ); //停止计时器 $('#send-code').removeAttr('disabled'); //启动按钮 $('.getCode').css({"backgroundColor":"#83c0eb"}); $('#send-code').text("重新发送验证码"); }else{ curcount--; $('#send-code').text( + curcount + "秒后重新获取"); } } }); |
验证没有写完全,核心的实现已经完成,有需要的同学拿走,如果涛哥分享的代码对你有帮助,别忘记捐赠本站。
转载请注明:PHP笔记 » jQuery短信验证码60秒倒计时按钮变灰