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 サーバー セキュリティ構成の一般ガイド
推薦する
Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作
序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...
TypeScript とは何ですか?
目次1. JavaScriptの問題2. TypeScriptの利点3. TypeScriptの欠点...
Nginxを使ってサーバー内で複数コンテナの共存を実現する方法
背景Tencent Linux クラウド ホストがあり、その上に Docker (ServiceDo...
docker-maven-plugin の詳細な使用方法
目次Docker-Maven-プラグインMavenプラグインの自動デプロイメント手順1. ホストマシ...
フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する
コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...
HTML ハイパーリンクの詳細な説明
ハイパーリンクハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間...
データベースクエリ、どのオブジェクトにどのフィールドが含まれているか、メソッドステートメント
データベースは、どのオブジェクトにどのフィールドが含まれているかを照会します。 *を選択 sysob...
フロントエンドJavaScript ES6の詳細について
目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...
QTとJavaScript間のインタラクティブデータの実装
1. QTからJSへのデータフロー1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を...
vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明
目次1. はじめに2. 使用1. vue2とvue3の違い2. ページ上の一部のデータはキャッシュす...
Ubuntu ベースのディストリビューションに Microsoft TrueType フォントをインストールするチュートリアル
Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...
MySQLデータベースの数千万件のデータクエリとストレージの詳細な説明
目次百万レベルのデータ処理ソリューションデータストレージ構造設計クエリステートメントの最適化1000...
ブラウザがクロージャをどのように認識するかについて詳しく説明します
目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...
Linux でファイル権限を変更する chmod コマンドの詳細な分析
Linux chmodコマンドを使用して、ターゲット ファイルにアクセス、読み取り、書き込み、または...
ubuntu20.04 LTS システムのデフォルト ソース ソース リスト ファイルの変更
誤って source.list の内容を変更し、一連のエラーが発生した場合は、デフォルトのソース フ...