実行例

<script type="text/javascript"><!--
myButton = 0;	// [Start]/[Stop]のフラグ
function myCheck(){
if (myButton==0){	// Startボタンを押した
myStart=new Date();	// スタート時間を退避
myButton = 1;
document.myForm.myFormButton.value = "Stop!";
myInterval=setInterval("myDisp()",1);
}else{	// Stopボタンを押した
myDisp();
myButton = 0;
document.myForm.myFormButton.value = "Start";
clearInterval( myInterval );
}
}
function myDisp(){
myStop=new Date();	// 経過時間を退避
myTime = myStop.getTime() - myStart.getTime();	// 通算ミリ秒計算
myH = Math.floor(myTime/(60601000));	// '時間'取得
myTime = myTime-(myH6060*1000);
myM = Math.floor(myTime/(60*1000));	// '分'取得
myTime = myTime-(myM601000);
myS = Math.floor(myTime/1000);	// '秒'取得
myMS = myTime%1000;	// 'ミリ秒'取得

document.myForm.myFormTime.value = myH+":"+myM+":"+myS+":"+myMS;
}
// --></script>
<form name="myForm">
<input type="text" size="28" name="myFormTime">
<input type="button" value="Start" name="myFormButton" onclick="myCheck()">
</form>

サンプルだけの HTMLはこちらへ

説明

1/100秒まで計測できる、ストップウォッチを作ってみます。あまり正確ではないと思いますが。。(^^;

過去のステップの寄せ集めでつくります。

プログラムの考え方ですが、[Start]ボタンで開始して、[Stop]ボタンで止めます。
[Start]/[Stop]の２つボタンを作るのも何ですので、[Start]を押すと[Stop]へ、[Stop]を押すと[Start]へ表示を変えて、１つのボタンでやります。
[Start]を押すと、スタート時間を取得、[Stop]を押すと、ストップ時間を取得して、ストップ時間からスタート時間を引いて、計測時間とします。

[Start]/[Stop]ボタンを押すと、myCheck() 関数を呼ぶようにします。

myButton は、[Start]ボタンモードを 0、[Stop]ボタンモードを 1 とします。初期値として、0 をセットしています。

myButton = 0;

// [Start]/[Stop]のフラグ

[Start]ボタンを押して、まず、スタート時間の取得、[Stop]へ表示変更、そして、myButton を 1 に変更します。
そして、[Stop]ボタンが押されるまで myDisp() を setInterval にて 1ミリ秒単位でクルグル回転させます。

myStart=new Date();	// スタート時間を退避
myButton = 1;
document.myForm.myFormButton.value = "Stop!";
myInterval=setInterval("myDisp()",1);

[Start]して、[Stop]が押されるまでは、経過秒を表示します。

myStop=new Date();	// 経過時間を退避
myTime = myStop.getTime() - myStart.getTime();	// 通算ミリ秒計算
myH = Math.floor(myTime/(60601000));	// '時間'取得
myTime = myTime-(myH6060*1000);
myM = Math.floor(myTime/(60*1000));	// '分'取得
myTime = myTime-(myM601000);
myS = Math.floor(myTime/1000);	// '秒'取得
myMS = myTime%1000;	// 'ミリ秒'取得

document.myForm.myFormTime.value = myH+":"+myM+":"+myS+":"+myMS;

[Stop]ボタンを押して、経過秒を表示して、再び[Start]が押せるように戻します。

myDisp();
myButton = 0;
document.myForm.myFormButton.value = "Start";
clearInterval( myInterval );

参考ステップ
Step.19 誕生日から何日経過したか計算してみましょう　
Step.48 実施日から何日経過したかカウントアップしてみましょう　
Step.76 ラーメンタイマーを作ってみましょう　

▲TOP

実行例

リスト

説明