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はredis 5.0.7をインストールし、外部構成とデータの問題をマウントします
Redis は、ANSI C で記述されたオープンソースの NoSQL データベースであり、ネットワ...
Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)
簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...
JavaScriptの詳細な分析と方向の変更方法
目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...
ウェブデザインには目的、アイデア、思考、そして粘り強さがなければならない
<br />はじめに：このアイデアは、数日前に上級ウェブデザインの次の記事を考えていると...
Vue3 Vue イベント処理ガイド
目次1. 基本的なイベント処理2. 親コンポーネントにカスタムイベントを送信するマウス修飾子4. キ...
Vueは複数の画像の追加、表示、削除を実装します
この記事では、Vueで複数の画像を追加、表示、削除するための具体的なコードを参考までに紹介します。具...
Mysql の遅いクエリ操作の概要
MySQL の遅いクエリの説明MySQL スロー クエリ ログは、MySQL が提供するログ レコー...
MAC で MySQL のデフォルトの文字セットを utf8 に変更する方法
1. デフォルトでインストールされているMySQLの文字セットを確認するmysql> '...
Ubuntu 20.04 に Xrdp サーバー (リモート デスクトップ) をインストールする方法
Xrdp は、グラフィカル インターフェイスを通じてリモート システムを制御できる Microsof...
MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
MySQL マスタースレーブ構築（複数のマスターと 1 つのスレーブ）の実装アイデアと手順
背景：最近、同社のプロジェクトは同時実行のプレッシャーに耐えられないようなので、最適化が差し迫ってい...
Mac での MySQL と Squel Pro の設定
Node.js の人気に応えて、最近、いくつかのサーバー側機能を実装するために Node.js を使...
CentOS はローカル yum ソースを使用して LAMP 環境を構築するグラフィック チュートリアル
この記事では、ローカル yum ソースを使用して CentOS 上に LAMP 環境を構築する方法に...
Linux で AutoFs マウント サービスをインストールするチュートリアル
Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...
CSS フィルターを使用してマウスオーバー効果を記述する例
CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...