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

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をサーバーデータベースに移行する方法

推薦する

HTML は Double 11 クーポン取得を実装します (クーポン取得ページを開く時間を設定します)

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...

Dockerモードで起動したTomcatのホームページにアクセスすると404エラーが発生する

シナリオ: docker で tomcat を起動すると (Alibaba Cloud からダウンロ...

HTML ドロップダウン ボックスの SELECT オプションを変更する複数の方法

フォームが送信されると、返された HTML ページが再レンダリングされ、SELECT コントロールの...

nginx で http でアクセスする Web サイトを https に変更する方法

目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....

RR および RC 分離レベルでのインデックスとロックのテスト スクリプトのサンプル コード

基本概念現在の読み取りとスナップショットの読み取りMVCC では、読み取り操作はスナップショット読み...

MySQL パーティション テーブルの基本入門チュートリアル

序文最近のプロジェクトでは、大量のデータを保存する必要があり、このデータには有効期限があります。クエ...

vue-cli を使用してプロジェクトを作成し、webpack でパッケージ化する方法

1. 環境を準備する(Node.jsをダウンロードし、環境変数を設定する) 2. vue-cliをグ...

Vue 名前付きスロットの基本的な使用例

序文名前付きスロットは、スロット内の「name」属性を使用して要素にバインドされます。知らせ: 1....

Linux で SSH 経由でリモート ファイルシステムをマウントする方法の詳細な説明

SSHFS の機能: FUSE(Linux向けの最高のユーザー空間ファイルシステムフレームワーク)を...

MySQLはmysqldump+binlogを使用して、削除されたデータベースの原理分析を完全に復元します。

1. 概要MySQL データベースの日常的な操作とメンテナンスにおいて、ユーザーが誤ってデータを削...

TypeScriptの列挙型を詳しく説明する

目次1. デジタル列挙2. 文字列の列挙3. 逆マッピング4. 異種列挙5. 定数列挙6. 列挙メン...

Mysql 5.7.19 無料インストール版 (64 ビット) の設定方法に関する詳細なチュートリアル

公式サイトから mysql-5.7.19-winx64 をダウンロードします。これはシステムの 64...

Windows での MySQL 8.0.15 の詳細なインストールと使用のチュートリアル

この記事では、MySQL 8.0.15の詳細なインストールと使用方法のチュートリアルを参考までに紹介...

Reactでのイベントバインディングの実装は3つの方法を指しています

1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...

ウェブ計算機を実装するためのjs

HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は?コンピュータには次の...