59秒後にテキストメッセージを取得するようにjQueryを設定する方法

現代社会において、携帯電話は人々の日常生活に欠かせないものとなっています。携帯電話認証コードの取得は、さまざまなビジネス シナリオにおいて不可欠な部分となっています。悪意のある登録や情報漏洩を防ぐために、多くのプラットフォームでは、ユーザーが登録またはログインするときに確認するための SMS 認証コードを設定します。ただし、SMS 認証コードが頻繁に送信されると、ユーザーに不必要なトラブルと時間の無駄が生じます。認証コードの検証を維持しつつ、いかにユーザーエクスペリエンスを向上させるかが検討課題となっている。

この場合、この問題を解決するために JQuery の使用を検討できます。 JQuery は高速かつ簡潔な JavaScript フレームワークであり、その中心となる設計哲学は「記述を減らし、より多くのことを行う」です。 JQuery を使用すると、ページ上で動的操作を非常に簡単に実行でき、Ajax テクノロジを使用してページとサーバー間の非同期対話を実現できます。

まず、ユーザーが確認コードを取得するためのボタンを定義する必要があります。ユーザーが「認証コードの取得」ボタンをクリックしたとき、ユーザーが「認証コード」ボタンを繰り返しクリックしないように、59 秒以内にボタンが使用できなくなるようにボタンのステータスを変更する必要があります。ここでは、Bootstrap フレームワークの無効なボタン スタイルから教訓を引き出します。同時に、ボタンが無効になるとボタンの色も変更されます。ボタンは以前は青色でしたが、無効になった後はボタンが灰色に変わります。

HTML コード:

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

ユーザーが [確認コードの取得] ボタンをクリックすると、ボタンのステータスを変更する必要があります。JQuery では、disabled 属性を設定することでボタンを無効にできます。ボタンの使用状況。同時に、タイマーを開始し、タイマー メカニズムを使用してボタンが 60 秒後に使用可能な状態に戻るように制御する必要があります。コードは次のとおりです:

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

コードでは、最初に 3 つの変数が定義されます。$getCodeBtn は検証コードを取得するボタンを表し、count はタイマーのカウントダウン秒数を表し、countdown はハンドルを表します。タイマー。ボタンをクリックした後、タイマーをトリガーし、setInterval() 関数を通じて匿名コールバック関数を毎秒呼び出します。コールバック関数では、まずボタンのステータスを無効に設定し、ボタンの CSS スタイルを変更してマウスを無効にします。また、ボタンのテキストを「再送信（カウントダウン）」に変更します。残り秒数を表示中は、タイマーのコールバック関数内でカウント値が 1 ずつ減らされます。カウントが 0 に減少すると、タイマーをクリアし、ボタンのステータスを使用可能に設定し、ボタンのテキストを「確認コードの取得」に変更します。

このようにして、確認コードの確認に影響を与えることなくユーザー エクスペリエンスを向上させることができ、ユーザーが SMS 確認コードをより便利に取得できるようにすると同時に、ユーザーが確認コード ボタンを繰り返しクリックすることを防ぎ、エラーの数を減らすことができます。 . SMS認証コードを頻繁に取得することで時間の無駄が発生します。

一般に、JQuery などの JavaScript フレームワークを通じて、ページのステータスを簡単に変更し、ユーザー エクスペリエンスを最適化することができ、それによって Web サイトやアプリのユーザー エクスペリエンスが向上します。

以上が59秒後にテキストメッセージを取得するようにjQueryを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。