JavaScript分秒カウントダウンタイマー実装方法_JavaScriptスキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:16:27

オリジナル

1203 人が閲覧しました

この記事の例では、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 プログラミング設計に役立つことを願っています。