This is a jquery based on the implementation of the mobile phone verification Code countdown effect codes, to achieve real-time display seconds Countdown function, but also to achieve the function of mobile phone number format verification, is a common website registration to send mobile phone verification code effect code.
Effect Description:
Register a website, when need to send verification code to the phone, we often encounter this effect:
First detect whether the phone conforms to 1 beginning, 11-digit format;
If not, the error message is indicated and false is returned;
Otherwise submitted to the background, the background is determined to return a value after receiving, send button gray and countdown.
Operating effect:
annual interest rate up to 14.4%Shanghai Investment and financial management, 200,000 investment, annual income of 14.4% real estate mortgage, wind control guarantee
--------------------------------effect Demo Source Download--------------------------------
For everyone to share the jquery implementation of the mobile phone to send verification codes countdown effect code as follows
?
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>jQuery手机发送验证码倒计时代码</title><linkhref="css/jb51.css"type="text/css"rel="stylesheet"/></head><body><divclass="form"> <divclass="div-name"> <labelfor="name">用户名</label><inputtype="text"id="name"class="infos"placeholder="请输入用户名"/> </div> <divclass="div-phone"> <labelfor="phone">手机</label><inputtype="text"id="phone"class="infos"placeholder="请输入手机"/> <ahref="javascript:;"class="send1"onclick="sends.send();">发送验证码</a> </div> <divclass="div-ranks"> <labelfor="ranks">验证码</label><inputtype="text"id="ranks"class="infos"placeholder="请输入验证码"/> </div> <divclass="div-conform"> <ahref="javascript:;"class="conform"onclick="sends.conform();">提交</a> </div></div><scriptsrc="js/jquery-1.8.3.min.js"></script><script>var sends = { checked:1, send:function(){ var numbers = /^1\d{10}$/; var val = $(‘#phone‘).val().replace(/\s+/g,""); //获取输入手机号码 if($(‘.div-phone‘).find(‘span‘).length == 0 && $(‘.div-phone a‘).attr(‘class‘) == ‘send1‘){ if(!numbers.test(val) || val.length ==0){ $(‘.div-phone‘).append(‘<spanclass="error">手机格式错误</span>‘); return false; } } if(numbers.test(val)){ var time = 30; $(‘.div-phone span‘).remove(); function timeCountDown(){ if(time==0){ clearInterval(timer); $(‘.div-phone a‘).addClass(‘send1‘).removeClass(‘send0‘).html("发送验证码"); sends.checked = 1; return true; } $(‘.div-phone a‘).html(time+"S后再次发送"); time--; return false; sends.checked = 0; } $(‘.div-phone a‘).addClass(‘send0‘).removeClass(‘send1‘); timeCountDown(); var timer = setInterval(timeCountDown,1000); } }}</script></body></html> |
The above is for everyone to share the jquery implementation of the mobile phone to send verification code countdown effect code, I hope you can like.
Articles you may be interested in:
- jquery Implementation Countdown function
- jquery Simple Countdown Implementation method
- jquery implements countdown to merchandise activity
- Using jquery to achieve beautiful round progress bar Countdown Plugin
- Online test countdown to prevent refreshes based on the Jquery+cookie implementation
- How to achieve the countdown effect of jquery Group purchase
- jquery Imitation Millet Phone snapping page countdown effect
- jquery Implementation Countdown button function code share
- jquery Countdown source Sharing
- Examples of jquery implementation countdown jumps
- jquery implements a countdown code for the phone to send a verification code
- A summary of the countdown effect of jquery implementation
jquery implementation of the phone sent verification code countdown effect code sharing
