SMS送信のカウントダウンを実装するJavaScript

この記事では、SMS送信のカウントダウンを実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

実装のアイデア:

1. jsは送信ボタン要素オブジェクトを取得します
2. 送信間隔を設定する（グローバル変数）
3. クリックイベントを送信ボタン要素オブジェクトにバインドします - - -onclick、
クリックイベントハンドラー:
① クリック後、ボタンは無効に設定されます（disabled: true;）。
② 1秒間隔でタイミング機能を使用します。
時間制限付き関数呼び出しの関数ハンドラ:
時間が0かどうかを判定する
0ではない - - - ボタンの説明が次のように変わります: 残り何秒で、時間が1ずつ減ります
0の場合はボタンをクリックでき、内部の説明が「送信」に戻ります。

コード例:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>SMS を送信</title>
    <スタイル>
        。箱 {
            幅: 360ピクセル;
            マージン: 100px 自動;
        }
    </スタイル>
</head>

<本文>
    <div class="box">
        携帯電話番号: <input type="number">
        <button>SMS を送信</button>
    </div>

    <スクリプト>
        var btn = document.querySelector('ボタン');
        var 時間 = 10;
        btn.addEventListener('クリック', 関数() {
            btn.disabled = true;
            var タイマー = setInterval(関数() {
                時間 == 0 の場合
                    // タイマーをクリアしてボタンを復元します clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = 'SMSを送信';
                    時間 = 10;
                } それ以外 {
                    btn.innerHTML = '残り' + 時間 + '秒';
                    時間 - ;
                }
            }, 1000);
        });
    </スクリプト>
</本文>

</html>

ページ効果:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:

JavaScript で 60 秒の SMS カウントダウンを実装
JS は、SMS 認証を送信した後にボタンのカウントダウン機能を実装します (更新カウントダウンが失敗しないようにするため)
JSはSMS認証コードのカウントダウン実装コードを取得します
js は SMS 送信カウントダウン機能を実装します (定期的な検証)
js は SMS を再送信するための 5 秒間のカウントダウンを実装します
JSは、ユーザーが登録するときにSMS認証コードとカウントダウンを取得する機能を実装します
JS SMS 認証コードカウントダウン機能の実装 (認証コードなし、カウントダウンのみ)
js で SMS を送信するためのカウントダウンを実装する簡単な方法
JS ベースで SMS 認証コードを送信した後のカウントダウン機能を実装します (ページの更新を無視し、ページが閉じられた場合はカウントダウン機能を実行しません)
JavaScript ベースの SMS ボタンカウントダウンの実装 (超シンプル)

<<: IdeaでTomcatを起動したときに複数のリスナーが報告される問題を解決する

>>: ローカルのMySQLをサーバーデータベースに移行する方法