Comment configurer jquery pour recevoir des messages texte après 59 secondes

Dans la société moderne, les téléphones portables sont devenus un élément indispensable de la vie quotidienne des gens. L'obtention de codes de vérification de téléphone mobile est devenue un élément indispensable dans divers scénarios commerciaux. Afin d'éviter les enregistrements malveillants et les fuites d'informations, de nombreuses plates-formes configurent des codes de vérification par SMS pour vérifier lorsque les utilisateurs s'inscrivent ou se connectent. Cependant, si les codes de vérification par SMS sont envoyés trop fréquemment, cela entraînera des problèmes inutiles et une perte de temps pour les utilisateurs. Comment améliorer l'expérience utilisateur tout en maintenant la vérification du code de vérification est devenu une question à prendre en compte.

Dans ce cas, nous pouvons envisager d'utiliser JQuery pour résoudre ce problème. JQuery est un framework JavaScript rapide et concis dont la philosophie de conception principale est « écrire moins, faire plus ». En utilisant JQuery, nous pouvons très facilement effectuer des opérations dynamiques sur la page et réaliser une interaction asynchrone entre la page et le serveur grâce à la technologie Ajax.

Tout d'abord, nous devons définir un bouton permettant aux utilisateurs d'obtenir le code de vérification. Lorsque l'utilisateur clique sur le bouton Obtenir le code de vérification, nous devons modifier l'état du bouton afin qu'il devienne indisponible dans les 59 secondes afin d'empêcher l'utilisateur de cliquer à plusieurs reprises sur le bouton du code de vérification. Nous tirons ici les leçons du style de bouton désactivé dans le framework Bootstrap. Dans le même temps, la couleur du bouton est également modifiée lorsque le bouton est désactivé, et une fois désactivé, le bouton devient gris. .

Code HTML :

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

Lorsque l'utilisateur clique sur le bouton Obtenir le code de vérification, nous devons modifier l'état du bouton. Dans JQuery, nous pouvons obtenir l'état indisponible du bouton en définissant l'attribut désactivé du bouton. Dans le même temps, nous devons démarrer une minuterie et utiliser le mécanisme de minuterie pour contrôler le bouton afin de revenir à l'état disponible après 60 secondes. Le code est le suivant :

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)
}

Dans le code, trois variables seront d'abord définies. $getCodeBtn représente le bouton pour obtenir le code de vérification, count représente le compte à rebours en secondes du minuteur et le compte à rebours représente le handle du minuteur. Après avoir cliqué sur le bouton, nous déclenchons une minuterie et appelons une fonction de rappel anonyme toutes les secondes via la fonction setInterval(). Dans la fonction de rappel, nous définissons d'abord l'état du bouton sur désactivé et modifions le style CSS du bouton pour désactiver la souris. Modifiez également le texte du bouton en « Renvoyer (compte à rebours) ». Lors de l'affichage des secondes restantes, la valeur du compte est décrémentée de 1 à chaque fois dans la fonction de rappel du timer. Lorsque le compte diminue à 0, nous effaçons la minuterie, définissons l'état du bouton sur disponible et modifions le texte du bouton en « Obtenir le code de vérification ».

De cette façon, nous pouvons améliorer l'expérience utilisateur sans affecter la vérification du code de vérification, permettant aux utilisateurs d'obtenir les codes de vérification SMS plus facilement, tout en empêchant les utilisateurs de cliquer à plusieurs reprises sur le bouton du code de vérification, réduisant ainsi le besoin de vérification fréquente du code SMS. et du temps perdu.

En général, grâce aux frameworks JavaScript tels que JQuery, nous pouvons facilement modifier le statut de la page et optimiser l'expérience utilisateur, améliorant ainsi l'expérience utilisateur de notre site Web ou de notre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!