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 を最適化する方法の詳細な説明
推薦する
モバイルウェブ画面適応（rem）
序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...
Linux で Sudo を使用して権限を委譲する
sudo 権限委譲の概要su スイッチ ID: su –l ユーザー名 –c 'コマンド&#...
MySQL 5.6 圧縮パッケージのインストール方法
MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...
レスポンシブ Web デザインが価値のない 5 つの理由
この記事は Tom Ewer の Managewp ブログからのもので、現在人気のレスポンシブ デザ...
CSSがページのレンダリングをブロックするかどうかについての簡単な説明
おそらく誰もが js の実行によって DOM ツリーの解析とレンダリングがブロックされることを知って...
Linuxの相対パスと絶対パスの使用
01. 概要絶対パスと相対パスはシェル環境でよく使用され、それぞれに独自の用途があります。相対パスの...
TypeScript で時間を費やした場所の概要
TS で時間を過ごした場所をいくつか記録します。 (まず、文句を言わせてください。stackover...
CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)
オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...
静的リソースファイルのアクセスログをフィルタリングするNginxの実装
乱雑なログ日常的に使用される Nginx は、静的リソース サーバーとリバース プロキシ サーバーの...
レスポンシブウェブデザインを実現するためにIEでCSS3メディアクエリをサポートする
今日の画面解像度は、320 ピクセル (iPhone) ほど小さいものから、2560 ピクセル以上 ...
MySQL の結合フィールドの Concat()
目次1. はじめに2. 本文2.1 フィールドの連結2.2 フィールドでの算術計算の実行1. はじめ...
XHTML の珍しいが便利なタグ
Xhtml には、あまり使用されないが非常に便利なタグが多数あります。半分の労力で 2 倍の結果を達...
JavaScript配列の重複排除のいくつかの方法についての詳細な説明
目次1.重複排除を設定する2. 重複を削除するには、2 回の for ループを使用します。 3. i...
Linux でのファイルの編集、保存、終了の実践的な説明
Linux でファイルを編集した後、保存して終了するにはどうすればよいですか?保存して終了するコマン...
MacにMySQLデータベースをインストールする方法を教えます
Mac 用 MySQL をダウンロード: https://downloads.mysql.com/a...