【JavaScript】カウントダウンタイマー

1. 基本的な目標

JavaScript で分単位のカウントダウン タイマーを設計します。時間が経過すると、ボタンがクリックできなくなります。問題を説明するために、次の表を示します。 50ミリ秒ごと、つまり0.05ごとにジャンプするように調整されています

実際に使用する場合は、window.onload=function(){.. .} 50 から 1000 まで。

時間切れになる前にボタンをクリックすることができます。

時間が経過するとボタンをクリックできなくなります。

2. 制作プロセス

残り時間:



<script><br/>/*main関数で使用する関数、宣言します*/<br/>var Clock =new Clock(); <br/>/*タイマーへのポインタ*/<br/>var timer;<br/>window.onload=function(){<br/> /*main 関数は、50 秒ごとにクロック関数の move メソッドを呼び出すだけです*/<br/> timer =setInterval (" Clock.move()",50);<br/> }<br/>function Clock(){<br/> /*s は、残りの秒数を表す var のようなグローバル変数ではなく、クロック() の変数です*/<br/> this .s= 140;<br/> this.move=function(){<br/> /*出力前に Exchange 関数を呼び出して、秒を分に変換します。Exchange はメイン関数 window.onload で使用されないため、宣言する必要はありません*。 /<br/> document.getElementById ("timer").innerHTML=exchange(this.s);<br/> /*呼び出されるたびに、残りの秒数が減ります*/<br/> this.s=this.s-1;<br/> / *時間がなくなったら、ウィンドウをポップアップし、ボタンを使用できないようにし、時計関数の move()*/<br/> の呼び出しを停止します if(this.s<0){<br/>alert("Time is up") ;<br/> document.getElementById("go" ).disabled=true;<br/> clearTimeout(timer);<br/> }<br/> }<br/> }<br/>function Exchange(time){<br/> /*JavaScript の除算は浮動小数点除算であり、Math.floor は整数部分を取得するために使用されます*/<br/> this. m=Math.floor(time/60);<br/> /*剰余演算があります*/<br/> this.s=(time%60);<br/> this.text=this. m+"分"+this.s+"秒"; <br/> /*経過時間の仮パラメータにはこれを使用しないでください。この関数で使用される他の変数はこれを使用する必要があります*/<br/> return this.text;<br/>}<br/></スクリプト><br/><br/><br/><p></script>