So stellen Sie JQuery so ein, dass Textnachrichten nach 59 Sekunden abgerufen werden

In der modernen Gesellschaft sind Mobiltelefone zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Der Erhalt von Handy-Verifizierungscodes ist zu einem unverzichtbaren Bestandteil verschiedener Geschäftsszenarien geworden. Um böswillige Registrierungen und Informationslecks zu verhindern, richten viele Plattformen SMS-Verifizierungscodes ein, um zu überprüfen, wann sich Benutzer registrieren oder anmelden. Wenn SMS-Bestätigungscodes jedoch zu häufig gesendet werden, führt dies zu unnötigem Ärger und Zeitverschwendung für die Benutzer. Die Verbesserung der Benutzererfahrung bei gleichzeitiger Aufrechterhaltung der Verifizierung des Bestätigungscodes ist zu einem Problem geworden, das berücksichtigt werden muss.

In diesem Fall können wir erwägen, JQuery zu verwenden, um dieses Problem zu lösen. JQuery ist ein schnelles und prägnantes JavaScript-Framework, dessen zentrale Designphilosophie „Weniger schreiben, mehr tun“ lautet. Mit JQuery können wir sehr bequem dynamische Vorgänge auf der Seite ausführen und über die Ajax-Technologie eine asynchrone Interaktion zwischen der Seite und dem Server erreichen.

Zuerst müssen wir eine Schaltfläche definieren, damit Benutzer den Bestätigungscode erhalten. Wenn der Benutzer auf die Schaltfläche „Verifizierungscode abrufen“ klickt, müssen wir den Status der Schaltfläche ändern, sodass die Schaltfläche innerhalb von 59 Sekunden nicht mehr verfügbar ist, um zu verhindern, dass der Benutzer wiederholt auf die Schaltfläche „Verifizierungscode“ klickt. Hier ziehen wir Lehren aus dem deaktivierten Schaltflächenstil im Bootstrap-Framework. Gleichzeitig ändert sich auch die Farbe der Schaltfläche, wenn die Schaltfläche zuvor blau war, und nachdem sie deaktiviert wurde, wird die Schaltfläche grau .

HTML-Code:

<button type="button" class="btn btn-primary" id="getCodeBtn" onclick="getCode(this)">获取验证码</button>

Wenn der Benutzer auf die Schaltfläche „Verifizierungscode abrufen“ klickt, müssen wir den Status der Schaltfläche ändern. In JQuery können wir das Attribut „Disabled“ festlegen die Schaltfläche Um den nicht verfügbaren Status der Schaltfläche zu erreichen. Gleichzeitig müssen wir einen Timer starten und den Timer-Mechanismus verwenden, um die Taste so zu steuern, dass sie nach 60 Sekunden in den verfügbaren Zustand zurückkehrt. Der Code lautet wie folgt:

function getCode(obj) {
    var $getCodeBtn = $(obj);
    var count = 59;
    var countdown = setInterval(function() {
        $getCodeBtn.addClass("disabled");
        $getCodeBtn.css("cursor", "not-allowed");
        $getCodeBtn.text("重新发送 (" + count + ")");
        count--;
        if (count == 0) {
            clearInterval(countdown);
            $getCodeBtn.css("cursor", "pointer");
            $getCodeBtn.removeClass("disabled");
            $getCodeBtn.text("获取验证码");
        }
    }, 1000)
}

Im Code werden zunächst drei Variablen definiert, die die Schaltfläche zum Abrufen des Bestätigungscodes darstellen, count die Countdown-Sekunden des Timers und Countdown die Griff des Timers. Nachdem wir auf die Schaltfläche geklickt haben, lösen wir einen Timer aus und rufen jede Sekunde eine anonyme Rückruffunktion über die Funktion setInterval() auf. In der Callback-Funktion setzen wir zunächst den Status der Schaltfläche auf „Deaktiviert“ und ändern den CSS-Stil der Schaltfläche, um die Maus zu deaktivieren. Ändern Sie außerdem den Text der Schaltfläche in „Erneut senden (Countdown)“. Während die verbleibenden Sekunden angezeigt werden, wird der Zählwert in der Callback-Funktion des Timers jedes Mal um 1 dekrementiert. Wenn der Zähler auf 0 sinkt, löschen wir den Timer, setzen den Status der Schaltfläche auf „Verfügbar“ und ändern den Text der Schaltfläche in „Bestätigungscode abrufen“.

Auf diese Weise können wir das Benutzererlebnis verbessern, ohne die Überprüfung des Bestätigungscodes zu beeinträchtigen, sodass Benutzer SMS-Bestätigungscodes bequemer erhalten und gleichzeitig verhindern können, dass Benutzer wiederholt auf die Schaltfläche für den Bestätigungscode klicken. Reduzieren Sie die Zeitverschwendung durch häufiges Abrufen von SMS-Bestätigungscodes.

Im Allgemeinen können wir durch JavaScript-Frameworks wie JQuery den Status der Seite einfach ändern und das Benutzererlebnis optimieren und so das Benutzererlebnis unserer Website oder APP verbessern.

Das obige ist der detaillierte Inhalt vonSo stellen Sie JQuery so ein, dass Textnachrichten nach 59 Sekunden abgerufen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!