Dies ist ein Countdown-Effektcode zum Senden von Bestätigungscodes per Mobiltelefon, der auf JQuery basiert. Er kann die Funktion der Echtzeitanzeige des Sekunden-Countdowns und die Funktion der Überprüfung des Mobiltelefonnummernformats realisieren Registrierung und Verifizierung des Handy-Codes.
Wirkungsbeschreibung:
Bei der Registrierung einer Website und der Notwendigkeit, einen Bestätigungscode an Ihr Mobiltelefon zu senden, tritt häufig dieser Effekt auf:
Überprüfen Sie zunächst, ob das Mobiltelefon dem 11-stelligen Format entspricht, beginnend mit 1;
Wenn es nicht übereinstimmt, wird eine Fehlermeldung angezeigt und „false“ zurückgegeben
Andernfalls wird es an den Hintergrund gesendet. Nachdem der Hintergrund den Empfang bestätigt hat, wird ein Wert zurückgegeben und die Schaltfläche „Senden“ wird grau und zählt herunter.
Betriebseffekt:
--------------------------------
EffektdemonstrationQuellcode-Download-------------------------------- Die jQuery-Implementierung des Countdown-Effektcodes für Mobiltelefone zum Senden von Bestätigungscodes lautet wie folgt
<!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>