この記事では、JavaScript Minuteおよび2番目のカウントダウンタイマーの実装方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
1。基本的な目的
JavaScriptで1分と2番目のカウントダウンタイマーを設計し、時間が完了すると、ボタンが競争できなくなります。
特定の効果は、下の図に示されています。問題を説明するために、50ミリ秒ごと、つまり0.05ごとにテーブルをジャンプするように調整されます。
実際に使用している場合は、setInterval( "clock.move()、50)を調整するだけです。 window.onload = function(){...} in 50から1000。
時間がなくなる前に、ボタンをクリックすることができます。
時間が使用された後、ボタンをクリックすることはできません。
2。生産プロセス
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>時間の残り</title>
</head>
<!-HTMLパーツは非常に簡単です。 JavaScriptによって制御する必要があるラインテキストと送信ボタンはすべてIDで書かれています - >
<body>
残り時間:<span id = "タイマー"> </span>
<入力id = "go" type = "submit" value = "go" />
</body>
</html>
<スクリプト>
/*メイン関数によって使用される関数、それを宣言*/
var clock = new Clock();
/*タイマーへのポインター*/
varタイマー;
window.onload = function(){
/*メイン関数は、50秒ごとに1回、クロック関数の移動メソッドを呼び出すだけです*/
Timer = setInterval( "clock.move()"、50);
}
functionClock(){
/*sはclock()の変数であり、VARではないグローバル変数であり、残りの秒を表します*/
this.s = 140;
this.move = function(){
/ *出力の前に、Exchange関数を呼び出して数秒から1分に変換します。なぜなら、交換はメイン関数ウィンドウで使用されていないため、宣言する必要はない */
document.getElementById( "タイマー")。innerhtml = exchange(this.s);
/*呼び出されるたびに、残りの秒は単独で削減されます*/
this.s = this.s-1;
/*時間がなくなると、ポップアップウィンドウがボタンを利用できなくなります。クロック関数のmove()の呼び出しを停止します*/
if(this.s <0){
アラート( "time is up");
document.getElementById( "go")。disabled = true;
ClearTimeout(タイマー);
}
}
}
関数交換(時間){
/*JavaScriptの部門は浮動小数点分割であり、Math.floorを使用して整数パートを取る必要があります*/
this.m = math.floor(time/60);
/*残留操作があります*/
this.s =(time%60);
this.text = this.m+"minute"+this.s+"second";
/*この関数で使用されている残りの変数は、これを渡された正式なパラメーター時間に使用しないでください*/
this.textを返します。
}
</script>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。