jQueryは検証コード送信のコントロールボタンを無効にする機能を実装します
|
必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されます。
送信をクリックした後、ボタンを無効にする
5秒後に禁止を解除して再送信
コードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>ドキュメント</title>
</head>
<本文>
<入力タイプ="テキスト">
<input type="button" value="送信">
<script src="js/jquery-1.12.4.min.js"></script>
<スクリプト>
// 要素を取得する var $btn = $("input:button")
// ボタンクリックイベントを追加 $btn.click(function () {
// 時間番号を格納する変数を定義します。var n = 5;
// ボタンを無効にする // ボタンのテキスト コンテンツを置き換える $(this).prop("disabled",true).val(n + "s してから再度送信")
// カウントダウンの内容を 1 秒ごとに変更します // タイマーを使用して 1 秒ごとに時間を減らしますvar timer = setInterval(() => {
n--;
// テキストの内容が変わります // タイマー内のこのデフォルト値はwindowです
$(this).val(n + "再送信後の秒数")
// 時間が0になったらタイマーを停止します if (n <= 0) {
クリアインターバル(タイマー)
// 5 秒後にテキストの送信を再開する必要があります // ボタンを無効にしません $(this).val("Resend").prop("disabled",false)
}
},1000)
})
</スクリプト>
</本文>
</html>jQuery を使用して検証コード送信コントロール ボタンを無効にする方法については、これで終わりです。jQuery コントロール ボタンを無効にする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker インストール tomcat dubbo-admin インスタンス スキル
>>: MySQL で結合を使用して SQL を最適化する方法の詳細な説明
推薦する
mysql8.0.23 Linux (centos7) のインストールの完全かつ詳細なチュートリアル
目次リレーショナルデータベースとは何ですか?非リレーショナルデータベースとは何ですか? MySQL ...
Vueはシンプルなショッピングカートの例を実装します
この記事では、Vueの具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は...
mysqlはコンマに基づいてデータ行を複数の行に分割します
目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...
CentOS7 systemdにカスタムシステムサービスを追加する方法
システムド: CentOS 7のサービスsystemctlスクリプトは、/usr/lib/syste...
htmlダウンロード機能の詳しい説明
新しいプロジェクトは基本的に終了しました。フロントエンドとバックエンドを分離して統合を完了したのは初...
ftp は SSH 経由で Linux にリモート接続します
まず Linux に ssh をインストールします。例として Centos を使用します。ポータル:...
HTML と CSS を使用して絵文字付きのコメント ボックスを作成する方法のチュートリアル
絵文字付きの HTML コメント ボックス。絵文字は Json データを通じて読み込まれ、好みに応じ...
MySQL トリガーの使用シナリオとメソッドの例
トリガー：トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...
LinuxのバックグラウンドでPythonプログラムを実行するいくつかの方法
1. 最初の方法は、unhup コマンドを直接使用してプログラムをバックグラウンドで実行することです...
Windows で MySQL データベースを別のディスクに移動する
序文今日、MySQL をインストールしたところ、データベース ストレージがデフォルトで C ドライブ...
ウェブページに埋め込まれた Flash と IE、FF、Maxthon の互換性の問題
いろいろ苦労した後、インターネットで検索したり、以前の会社のプロジェクトを探したり、他の人のプロジェ...
Angular 依存性注入の説明
目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...
Firefoxでリンクをクリックしたときに点線の枠線を削除する方法
今日、ブラウザの互換性の問題にいくつか遭遇しました。そのうちの 1 つは奇妙に感じました。Firef...
新しい Linux ファイル権限設定における umask の詳細な理解
序文起源は質問 1 です: umask が 022 に設定されている場合、作成するファイルのデフォル...
MySQL に配列を保存するサンプルコードと方法
多くの場合、ストアド プロシージャを作成するときに配列がよく使用されますが、MySQL ではストアド...