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 になり、クリックできなくなります。 これで、Javascript を使用して SMS 認証コードの送信間隔を実装する方法についての説明は終わりです。SMS 認証コードの送信に関するより関連性の高い js コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Innodb システムテーブルスペースのメンテナンス方法
>>: Linux/CentOS サーバー セキュリティ構成の一般ガイド
推薦する
MySQL 8.0.22 解凍版インストールチュートリアル（初心者向け）
目次1. リソースのダウンロード2. ソフトウェアを解凍する2.1 場所を選択する2.2 名前を変更...
コード標準では、SQL ステートメントに結合が多すぎないようにする必要があるのはなぜですか?
無料ポイントインタビュアー：Linuxを使ったことはありますか？私：はいインタビュアー：メモリ使用量...
MySQL における datetime と timestamp の違いと使い方
1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか?実際、表現方法はいろいろありま...
MySQL 8.0 再帰クエリの簡単な使用例
序文この記事では、MySQL 8.0 の新機能を使用して再帰クエリを実装します。詳細なサンプル コー...
CSS3 カスタムスクロールバースタイル::webkit-scrollbar サンプルコード詳細説明
Windows のデフォルトのスクロール バー スタイルは見苦しく、プロジェクト内でスクロール バー...
MySQL シャーディング入門ガイド
序文リレーショナル データベースは、システムのボトルネックになる可能性が高くなります。単一のマシンの...
Ubuntu LinuxにOracle Java 14をインストールする方法
最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...
Linux カーネル デバイス ドライバー Linux カーネル モジュールの読み込みメカニズム メモの概要
#include <linux/moduleparam.h> 1. モジュールパラメータ...
href をクリックした後にページがジャンプしないようにするための空のリンクの正しい書き方 # 問題
リンクを使用する必要がある場合もありますが、リンクする必要はありません。onclick イベントを処...
select count() と select count(1) の違いと実行方法
Count(*) または Count(1) または Count([column]) は、おそらく S...
vue3とvue2の利点の比較
目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...
Windows SSHサーバーを簡単に構築するためのいくつかの手順
ここで言及されている SSH は Security Shell と呼ばれます。Linux をよく使用...
Mysql クラシック高レベル/コマンドライン操作 (クイック) (推奨)
サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...
Python で pymysql モジュールを使用して MySQL データベースに接続する
pymysqlをインストールするpip install pymysql 2|0pymysqlの使用2...
1 つの記事で Nginx の現在の制限を理解する (簡単な実装)
Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...