JS はボタンが使用可能になるまで 30 秒間自動的にカウントダウンします (2 つのシナリオ)_JavaScript スキル

ディスプレイレンダリング:

カウントダウンは、Web 開発でユーザーのフォーム上の操作を制限するためによく使用されます。たとえば、ユーザーが一定時間内に関連するプロトコル情報を読み取ってから次の操作に進むことが期待されます。たとえば、携帯電話の認証コードを受信した場合、ユーザーは一定時間経過後に再度認証コードを取得することができます（認証コードが受信されなかった場合）。そこで今日は、JavaScript を使用してこの単純なアプリケーションを実装する方法を紹介します。

デモを見る ソース コードをダウンロード

アプリケーションシナリオ 1: ユーザー登録時に関連する契約情報を読んだ後にのみボタンをアクティブにできます

一部の Web サイトでは、登録時にいわゆるユーザー契約などの情報に同意することが求められます。契約の内容が非常に重要である場合、一部の Web サイトでは、新規登録ユーザーが「次へ」ボタンをアクティブにする前に関連する契約情報を読む必要があります。フォームを送信します。ユーザーが契約情報を読めるようにするために (実際にユーザーがそれを読むかどうかはわかりませんが)、開発者は 30 秒後にフォーム送信ボタンがアクティブになるなどのカウントダウンを設計します。それを実装する方法。

<form action="http://www.jb51.net/" method="post" name="agree"> 
 <input type="submit" class="button" value="请认真查看<服务条款和声明> ()" name="agreeb"> 
</form> 

上記のようなフォームがあるとします。フォームの他の部分は省略します。最初はボタンが 1 つだけあり、30 秒のカウントダウンが終了するとボタンに「」が表示されます。同意します」と表示され、クリックしてアクティブ化できます。

この効果を実現するためにネイティブ JS を使用します:

<script> 
var secs = ; 
document.agree.agreeb.disabled=true; 
for(var i=;i<=secs;i++) { 
 window.setTimeout("update(" + i + ")", i * ); 
} 
function update(num) { 
 if(num == secs) { 
 document.agree.agreeb.value =" 我 同 意 "; 
 document.agree.agreeb.disabled=false; 
 } 
 else { 
 var printnr = secs-num; 
 document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")"; 
 } 
} 
</script> 

時間を 30 秒に設定しました。もちろん、必要な時間を設定してボタンを無効にし、window.setTimeout を通じて update() 関数を呼び出して、30 秒間ループすることもできます。対照的に、カウントダウンが完了すると、「同意します」が表示され、ボタンがアクティブになります。

アプリケーション シナリオ 2: ユーザーは SMS チャネルをアクティブにして、ユーザーの携帯電話に確認コード SMS を送信し、身元を確認します

多くの Web サイトでは、ユーザーの身元を確認する際に、ユーザー情報がユーザーの携帯電話に関連付けられるように、ユーザー情報のセキュリティを向上させる必要があります。そのため、ユーザーが正しく入力すると、確認コード情報がユーザーの携帯電話に送信されます。確認コードを入力してバックエンドに送信すると、操作は成功します。さまざまな理由で確認コードの送信が失敗することもあり、ユーザーが送信をクリックし続けることができません。このように、開発者はカウントダウンを使用してこの種の問題に対処し、ユーザーが SMS をアクティブ化した後、30 秒経過しても確認コード SMS が受信されない場合、ユーザーはクリックして SMS を送信できるようになります。

<form action="http://www.jb51.net/" method="post" name="myform"> 
 <input type="button" class="button" value="获取手机验证码" name="phone" onclick="showtime()"> 
</form> 

上記のフォームは、onclick イベントをボタンに追加し、showtime() 関数を呼び出します。

<script> 
function showtime(t){ 
 document.myform.phone.disabled=true; 
 for(i=;i<=t;i++) { 
 window.setTimeout("update_p(" + i + ","+t+")", i * ); 
 } 
 
} 
function update_p(num,t) { 
 if(num == t) { 
 document.myform.phone.value =" 重新发送 "; 
 document.myform.phone.disabled=false; 
 } 
 else { 
 printnr = t-num; 
 document.myform.phone.value = " (" + printnr +")秒后重新发送"; 
 } 
} 
</script> 

シナリオ 1 と同様に、ボタンがクリックされると、カウントダウンが window.setTimeout の update_p() を呼び出すことによって表示されます。完了すると、ボタンに「再送信」が表示され、ボタンのステータスが利用可能になります。

上記の 2 つのシナリオは、ボタンが使用可能になるまでに js が 30 秒間自動的にカウントダウンする方法を示しています。これが皆さんの役に立つことを願っています。