JavaScript分秒カウントダウンタイマー実装方法_JavaScriptスキル

この記事の例では、JavaScript カウントダウン タイマーの実装方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. 基本的な目標

時間が経過するとボタンをクリックできなくなるカウントダウン タイマーを JavaScript で設計します

問題を説明するために、テーブルは 50 ミリ秒ごと、つまり 0.05 ごとにジャンプするように調整されています。

実際に使用する場合は、window.onload=function(){...} の setInterval(" Clock.move()",50); を 50 ～ 1000 に調整するだけです。

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

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

2. 製造工程

コードをコピー コードは次のとおりです:

頭>


残り時間:
本文>


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



この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。