JavaScriptを使用してSMS認証コード間隔を送信する機能を実装する

多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があります。しかし、認証コードの悪意ある取得を防ぐために、通常はクリック可能な時間間隔を設定します。時間間隔1が経過すると、送信を継続できます。次に、コードを使用して実装します。

コードは次のとおりです

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
</head>
<本文>
携帯電話番号: <input type="text"><button>確認コードを送信</button>
<スクリプト>
  var btn = document.querySelector('ボタン')
  var 時間 = 3
  btn.addEventListener('click',function() {
    btn.disabled=true
    var タイマー = setInterval(関数 () {
      (時間<0)の場合{
        クリアインターバル(タイマー)
        btn.disabled=false
        btn.innerHTML = '確認コードを送信'
        時間=3
      }それ以外 {
        btn.innerHTML = '残り' + 時間 + '秒'
        時間 -= 1
      }
    },1000)
  })
</スクリプト>
</本文>
</html>

効果は以下のとおりです

ここに画像の説明を挿入

コードの説明<br /> ここでは、ボタンのスタイルと機能のみを変更するため、ボタンを取得して、カウントダウン時間である時間変数を設定します。次に、クリックイベントを設定します。このボタンをクリックすると、このボタンの無効化が true になり、クリックできなくなります。
次にタイマーを設定します。カウントダウンが 0 未満の場合、タイマーをクリアしてカウントダウンを終了します。ボタンをクリック可能にすると、ボタン内の 1 が確認コードになります。次に、カウントダウンを 3 に再割り当てします。
カウントダウンが0より大きい場合は、ボタンのテキストを「残り」+時間+「秒数」、時間-に変更し、サイクルごとに1回判定します。

これで、Javascript を使用して SMS 認証コードの送信間隔を実装する方法についての説明は終わりです。SMS 認証コードの送信に関するより関連性の高い js コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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