jquery를 기반으로 휴대폰으로 인증코드를 보내기 위한 카운트다운 효과 코드입니다. 초 카운트다운 실시간 표시 기능과 휴대폰 번호 형식을 확인하는 기능을 구현할 수 있는 웹사이트입니다. 등록 및 휴대폰 인증 코드 전송.
효과 설명:
웹사이트를 등록하고 휴대폰으로 인증 코드를 보내야 할 때 다음과 같은 현상이 자주 발생합니다.
먼저 휴대폰이 1로 시작하는 11자리 형식을 따르는지 확인하세요.
일치하지 않으면 오류 메시지가 표시되고 false가 반환됩니다.
그렇지 않으면 백그라운드에 수신을 확인한 후 값이 반환되고 보내기 버튼이 회색으로 바뀌고 카운트다운됩니다.
운영효과:
--------------------------------효과 시연 소스코드 다운로드--------------------------------
휴대전화 인증코드 전송을 위한 카운트다운 효과 코드의 jQuery 구현은 다음과 같습니다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery手机发送验证码倒计时代码</title> <link href="css/jb51.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="form"> <div class="div-name"> <label for="name">用户名</label><input type="text" id="name" class="infos" placeholder="请输入用户名" /> </div> <div class="div-phone"> <label for="phone">手机</label><input type="text" id="phone" class="infos" placeholder="请输入手机" /> <a href="javascript:;" class="send1" onclick="sends.send();">发送验证码</a> </div> <div class="div-ranks"> <label for="ranks">验证码</label><input type="text" id="ranks" class="infos" placeholder="请输入验证码" /> </div> <div class="div-conform"> <a href="javascript:;" class="conform" onclick="sends.conform();">提交</a> </div> </div> <script src="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('<span class="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>
위 내용은 jquery에서 구현한 휴대폰 전송 인증 코드 카운트다운 효과 코드입니다. 마음에 드셨으면 좋겠습니다.