时间:2021-07-01 10:21:17 帮助过:104人阅读
比较常用的一种效果,当点击获取手机验证码之后,会有一个倒计时的效果,一般是60秒开始到0就变为“获取验证码”,下面以5秒动画图片示例:
HTML代码
jQuery代码:
- <ul class="ulist">
- <li class="group">
- <label class="label" for="phone">联系电话:</label>
- <div class="controls">
- <input type="text" id="phone" class="txt">
- </div>
- </li>
- <li class="group">
- <label class="label" for="code">验证码:</label>
- <div class="controls">
- <input type="text" id="code" class="txt">
- <button class="btn btn-small get-code" onclick="getCode(this)" id="J_getCode">获取验证码</button>
- <button class="btn btn-small reset-code" id="J_resetCode" style="display:none;"><span id="J_second">60</span>秒后重发</button>
- </div>
- </li>
- </ul>
- /*获取验证码*/
- var isPhone = 1;
- function getCode(e){
- checkPhone(); //验证手机号码
- if(isPhone){
- resetCode(); //倒计时
- }else{
- $('#phone').focus();
- }
- }
- //验证手机号码
- function checkPhone(){
- var phone = $('#phone').val();
- var pattern = /^1[0-9]{10}$/;
- isPhone = 1;
- if(phone == '') {
- alert('请输入手机号码');
- isPhone = 0;
- return;
- }
- if(!pattern.test(phone)){
- alert('请输入正确的手机号码');
- isPhone = 0;
- return;
- }
- }
- //倒计时
- function resetCode(){
- $('#J_getCode').hide();
- $('#J_second').html('5');
- $('#J_resetCode').show();
- var second = 5;
- var timer = null;
- timer = setInterval(function(){
- second -= 1;
- if(second >0 ){
- $('#J_second').html(second);
- }else{
- clearInterval(timer);
- $('#J_getCode').show();
- $('#J_resetCode').hide();
- }
- },1000);
- }