jQuery_jquery によって実装された携帯電話送信確認コードのカウントダウン効果のためのコード共有
jqueryをベースに携帯電話で認証コードを送信するためのカウントダウンエフェクトコードで、秒カウントダウンのリアルタイム表示機能と携帯電話番号形式の認証機能を実現できます。携帯電話認証コードの登録と送信により、コードが有効になります。
効果の説明:
Web サイトを登録し、携帯電話に確認コードを送信する必要がある場合、次のような現象がよく発生します。
まず、携帯電話が 1 から始まる 11 桁の形式に準拠しているかどうかを確認してください。
一致しない場合は、エラー メッセージが表示され、false が返されます。
それ以外の場合は、バックグラウンドで受信が確認された後、バックグラウンドに送信され、値が返され、送信ボタンが灰色になり、カウントダウンされます。
動作効果:
--------------------------------
ソースコードダウンロード-------------------------------- 携帯電話が確認コードを送信するためのカウントダウン効果コードの jQuery 実装は次のとおりです
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery手机发送验证码倒计时代码</title>
<link href="css/jb51.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="form">
<div class="div-name">
<label for="name">用户名</label><input type="text" id="name" class="infos" placeholder="请输入用户名" />
</div>
<div class="div-phone">
<label for="phone">手机</label><input type="text" id="phone" class="infos" placeholder="请输入手机" />
<a href="javascript:;" class="send1" onclick="sends.send();">发送验证码</a>
</div>
<div class="div-ranks">
<label for="ranks">验证码</label><input type="text" id="ranks" class="infos" placeholder="请输入验证码" />
</div>
<div class="div-conform">
<a href="javascript:;" class="conform" onclick="sends.conform();">提交</a>
</div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var sends = {
checked:1,
send:function(){
var numbers = /^1\d{10}$/;
var val = $('#phone').val().replace(/\s+/g,""); //获取输入手机号码
if($('.div-phone').find('span').length == 0 && $('.div-phone a').attr('class') == 'send1'){
if(!numbers.test(val) || val.length ==0){
$('.div-phone').append('<span class="error">手机格式错误</span>');
return false;
}
}
if(numbers.test(val)){
var time = 30;
$('.div-phone span').remove();
function timeCountDown(){
if(time==0){
clearInterval(timer);
$('.div-phone a').addClass('send1').removeClass('send0').html("发送验证码");
sends.checked = 1;
return true;
}
$('.div-phone a').html(time+"S后再次发送");
time--;
return false;
sends.checked = 0;
}
$('.div-phone a').addClass('send0').removeClass('send1');
timeCountDown();
var timer = setInterval(timeCountDown,1000);
}
}
}
</script>
</body>
</html>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Google Chrome で認証コードの画像が表示されない場合はどうすればよいですか? Chrome ブラウザで認証コードが表示されません。
Mar 13, 2024 pm 08:55 PM
Google Chrome で認証コードの画像が表示されない場合はどうすればよいですか? Google Chrome を使用して Web ページにログインするために確認コードが必要になる場合があります。一部のユーザーは、画像検証コードを使用すると、Google Chrome で画像のコンテンツが適切に表示されないことに気づきます。何をすべきでしょうか? Google Chromeの認証コードが表示されない場合の対処法を以下のエディターでご紹介しますので、皆様のお役に立てれば幸いです！方法の紹介： 1. ソフトウェアに入り、右上隅の「詳細」ボタンをクリックし、下のオプションリストで「設定」を選択してに入ります。 2. 新しいインターフェースに入ったら、左側の「プライバシー設定とセキュリティ」オプションをクリックします。 3. 次に、右側の「Web サイト設定」をクリックします。
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
Win10 起動時の 10 秒カウントダウンをキャンセルするには? Win10 起動時のカウントダウンをキャンセルする 3 つの方法
Feb 29, 2024 pm 07:25 PM
win10 では、起動カウントダウンがデフォルトで有効になっています。コンピューターの電源を入れると、カウントダウン インターフェイスが表示されます (通常は 10 秒のカウントダウン)。この時間内に、起動を続行するか、他の操作を実行するかを選択できます。起動カウントダウンはシステムにある程度の利便性をもたらしますが、場合によっては問題を引き起こす可能性もあります。表示を解除したいけどやり方がわからない この記事では、Win10起動後の数秒のカウントダウンを解除する方法を紹介します。 win10 の起動カウントダウンについて理解する win10 では、起動カウントダウンがデフォルトで有効になっています。コンピューターの電源を入れると、カウントダウン インターフェイスが表示されます (通常は 10 秒のカウントダウン)。この時間内に、起動を続行するか続行するかを選択できます。
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
Youka に登録するための確認コードが届かないのはなぜですか?
Mar 03, 2024 pm 05:31 PM
Youkazhong ユーザーは登録するために確認コードを使用する必要があるのに、登録用の確認コードを受け取れないのはなぜですか?ネットワークの問題、デバイスの問題、またはサーバーの問題により、ユーザーは認証コードを受信できない場合があります。認証コードが届かないという登録の問題について、インストール方法を説明します。以下に詳しく説明しますので、ぜひご覧ください。 Youka に登録するための確認コードを受信できないのはなぜですか? 回答: ネットワークの問題、機器の問題、およびサーバーの問題により、詳細な導入が行われます: 1. ネットワークの問題の解決策: ユーザーは自分のネットワークを確認する必要があり、ネットワークの変更を試みることができます。ネットワーク環境。ネットワークが弱い場合、認証コードの送信に失敗します。 2. 機器の問題: 解決策: バックグラウンドで干渉するソフトウェアがないか確認し、デバイスを再起動するか、ソフトウェアを再インストールしてください。
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
Feb 29, 2024 am 09:03 AM
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します
jQuery における eq の役割と応用シナリオを理解する
Feb 28, 2024 pm 01:15 PM
jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s
