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 を最適化する方法の詳細な説明
推薦する
Nginx フォワード プロキシとリバース プロキシ、および負荷分散機能の構成コード例
この記事は主に、Nginx のフォワード プロキシとリバース プロキシ、および負荷分散機能の設定コー...
Docker 階層化パッケージを使用して Spring Boot を設定する方法
Spring Boot プロジェクトでは、Docker コンテナ、jar、war の階層化パッケージ...
MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル (Windows 10 版)
この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...
C# は MySQL コマンドラインのバックアップとリカバリを実装します
MySQL データベースをバックアップするためのツールは多数あります。過去 2 日間で、C# を使用...
HTMLドキュメントタイプの詳細な説明
私のは: <!DOCTYPE html>ブログガーデン: <!DOCTYPE HT...
antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)
プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に...
HTMLは読み取り専用のテキストボックスを実装しており、コンテンツを変更することはできません。
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!--方法 1: onf...
大規模なデータテーブルのコピー効率を向上させるMySQLソリューション
序文この記事では主に、MySQL で大規模なデータ テーブルのコピーの効率を向上させることに関する関...
Amoeba を使用して MySQL データベースの読み取り/書き込み分離を実装する方法の詳細な説明
MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...
MySQL 5.7.19 Winx64 ZIP アーカイブのインストールと使用に関する問題の概要
今日はMySQLのインストール方法を学びましたが、その過程でいくつか問題が発生しました。関連記事をい...
JavaScript 開発における標準コミットメッセージの重要性の詳細な説明
目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...
MySQL sql_mode の変更が有効にならない理由と解決策
目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...
10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ
Docker は 2013 年のリリース以来、広く注目され、ソフトウェア業界を変える可能性を秘めてい...
HTML（divレイヤー）を介してFLASHにリンクを追加するための実装コード
今日、クライアントが広告を掲載したいのですが、提供された素材は Flash です。私たちはあまり気に...
MySQL データベース クエリ パフォーマンス最適化戦略
クエリを最適化するExplain ステートメントを使用してクエリ ステートメントを分析するExpla...