Das Beispiel in diesem Artikel beschreibt, wie JS den Countdown-Effekt basierend auf Rekursion implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Ereignis:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $('.js-sms-code').click( function (){
$(this).attr( "disabled" , "disabled" ).html( "<span style='color:#666'><span id='countdown'>60</span>s 后再试</span>" );
countdown();
var tel = $('#tel').val();
$.ajax({
url: "{sh::U('Home/sendSmscode')}" ,
type:'POST',
dataType: "json" ,
data: {tel: tel},
success: function () {
},
error: function () {
$('.js-help-info').html( "请求失败" );
}
});
})
|
Nach dem Login kopieren
Kommentar: Die Countdown-Methode ist hier das Schöne.
Sehen Sie sich den Code an:
1 2 3 4 5 6 7 8 9 10 11 12 | function countdown() {
setTimeout( function () {
var time = $( "#countdown" ).text();
if (time == 1) {
$('.js-sms-code').removeAttr( "disabled" );
$('.js-sms-code').html( "发送验证码" );
} else {
$( "#countdown" ).text(time - 1);
countdown();
}
}, 1000);
}
|
Nach dem Login kopieren
Kommentar: Wenn die Zeit nicht gleich 1 ist, rufen Sie weiter an und subtrahieren Sie eine Sekunde davon die Zeit. setTimeout ist ebenfalls sehr wichtig. Bis die Zeit auf 1 sinkt, entfernen Sie die Option „Deaktiviert“ und ändern Sie den Inhalt in „Bestätigungscode senden“.