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 を最適化する方法の詳細な説明
推薦する
JavaScript でエラーが発生しやすい演算子操作の概要
目次算術演算子異常状況1: 特殊値リテラルを含む操作異常な状況 2: 他の種類のデータが数学演算に関...
VMware15 centos7 ブリッジモード ssh に突然アクセスできなくなる問題を解決する
仮想マシンに独自の LAN IP を持たせたいので、テストを容易にするためにブリッジを使用します。 ...
Jenkins の docker-compose デプロイメントと構成に関する詳細なチュートリアル
Docker-compose デプロイメント構成 Jenkins 1. Docker-compose...
JavaScriptの原理と方向性
これが何を指しているのかをどのように判断するのでしょうか? ①グローバル環境で呼び出された場合はwi...
CSS3 とテーブルタグを使用して円軌道アニメーションを実装するためのサンプルコード
html: 実際には、テーブルタグに従っていくつかの実線の円 div を正六角形に配置し、div コ...
Vueはルールを使用してフォームフィールドの検証を実装します
Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...
WeChatアプレットは記録機能を実装します
この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...
vue3.0+vant3.0の迅速なプロジェクト構築の実装
目次1. プロジェクトの構築2. Vue3 体験 + Vant 紹介2020年9月18日にvue.j...
MySQL curdate() 関数の詳細な例
MySQL CURDATE関数の紹介文字列コンテキストまたは数値コンテキストの YYYMMDD 形式...
ReactとAntdのFormコンポーネントを組み合わせてログイン機能を実装する方法を詳しく説明します
目次1. ReactとAntdを組み合わせてログイン機能を実現2. ReactとAntdを組み合わせ...
Docker Gitlab+Jenkins+Harborは永続的なプラットフォーム運用を構築します
CI/CD の概要CIワークフロー設計Gitコードバージョン管理システムはコマンドラインでのみ管理で...
DevUI で独自の Angular コンポーネント ライブラリを構築する方法
目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...
jsはreduceメソッドを使用してコードをよりエレガントにします
序文実際のプロジェクトでは、最も一般的な処理は計算とループロジックである可能性があります。配列でre...
WIN10 での JDK インストールと環境変数の設定手順 (詳細版)
目次1. JDKをダウンロードする（例としてjdk1.8.0を使用する） 2. JDK をインストー...
nginx を使用して正規表現で指定された URL リクエストを傍受する方法
nginx サーバーnginx は、静的ファイルの処理に非常に効率的な優れた Web サーバーです。...