HTMLとJavaScriptを使ったストップウォッチ（ミリ秒表示）

はじめまして。プログラミング初心者です。

HTMLとJavascriptを使ってスタートボタンとストップボタンがあり、
「分、秒、ミリ秒」を「◯◯:◯◯:◯◯」と表示する
ストップウォッチを作ろうと以下のように作成しました。

■HTML部分■

<!DOCTYPE> <html lang="ja"> <head> <meta charset="utf-8"> <title>ストップウォッチ</title> <script type="text/javascript" src="main.js"></script> </head> <body> <form name="form_sw"> <input type="button" value="スタート" onClick="run();"> <br> <br> <input type="button" value="ストップ" onClick="stop()"> <br> <br> <input type="text" name="count" size="10" value="00:00:00"> <br> </form> </body> </html>

■JavaSprict部分■

function run() {
time = 0;
tm = setInterval("disp()",10);
}
function stop() {
clearInterval(tm);
}
function disp() { //時間表示
++time;
min = Math.floor(time / 60000);
min10 = Math.floor(min / 10); //分の10の位
min1 = min % 10; //分の1の位
sec = time % 3600000; //秒
sec10 = Math.floor(sec / 10); //秒の10の位
sec1 = sec % 10; //秒の1の位
mSec = sec % 360000; //ミリ秒
mSec10 = Math.floor(mSec / 10) //ミリ秒の10の位
mSec1 = mSec % 10; //ミリ秒の1の位

document.form_sw.count.value =
min10 + min1 + ":" + sec10 + sec1 + ":" + mSec10 + mSec1;
}

一応動くのですが、disp() 内のmin,min10,min1,sec,sec10,sec1,mSec,mSec10,mSec1の単位の換算に失敗しているようで、うまくカウントされません。

自分でも色々と数値をいじってはみたのですが、ドツボにはまってしまい。。

お力添えいただけないでしょうか。
よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

修正してみました

javascript
1function run() { 
2    time = 0; 
3    tm = setInterval("disp()",10);
4} 
5function stop() { 
6    clearInterval(tm); 
7} 
8function disp() { //時間表示 
9    ++time;
10
11    min = Math.floor(time / 6000); 
12    min10 = Math.floor(min / 10); //分の10の位 
13    min1 = min % 10; //分の1の位 
14
15    sec = Math.floor(time % 6000 / 100); //秒 
16    sec10 = Math.floor(sec / 10); //秒の10の位     
17    sec1 = sec % 10; //秒の1の位 
18    
19    mSec = time % 100; //ミリ秒 
20    mSec10 = Math.floor(mSec / 10) //ミリ秒の10の位 
21    mSec1 = mSec % 10; //ミリ秒の1の位 
22
23    document.form_sw.count.value =  '' + min10 + min1 + ":" + sec10 + sec1 + ":" + mSec10 + mSec1; 
24}

もっとシンプルに考えるなら以下の様なコードでも良いかと思います

javascript
1function run() { 
2    time = 0; 
3    min  = 0;
4    sec  = 0;
5    mSec = 0;
6    tm = setInterval("disp()",10);
7} 
8function stop() { 
9    clearInterval(tm); 
10} 
11
12function disp() { //時間表示 
13    mSec++;
14    if (mSec >= 100) {
15      sec++;
16      mSec = 0;
17    }
18    if (sec >= 60) {
19      min++;
20      sec = 0;
21    }
22
23    // substrで桁数調整
24    // substr(-2)で文字列の末尾2文字を取り出す
25    // 1桁の場合 '0'+1 → '01' → '01'
26    // 2桁の場合 '0'+10→'010' → '10'
27    document.form_sw.count.value = ('0'+min).substr(-2) + ":" + ('0'+sec).substr(-2) + ":" + ('0'+mSec).substr(-2); 
28}

投稿2015/07/16 15:41

takamujp

総合スコア66

退会済みユーザー

2015/07/16 22:47

別解まで、ご回答ありがとうございます！色々な書き方ができるのですね。本当に勉強になりました。

行動規範の内容に同意します

下記でいけると思います。

javascript
1//ミリ秒 
2var mSec = time; 
3if (mSec < 10) {
4	mSec = "0" + String(mSec);
5}
6if (mSec > 99) {
7	mSec = String(mSec);
8	mSec = mSec.substr(mSec.length-2);
9}
10
11//秒
12sec = Math.floor((time / 100) % 60); 
13if (sec < 10) {
14	sec = "0" + String(sec);
15}
16
17//分
18var min = Math.floor((time / 100) / 60); 
19
20document.form_sw.count.value = min + ":" +sec + ":" + mSec;