javascript ストップウォッチ作成　カウント処理の方法

HTML
1  <!DOCTYPE html>
2    <html lang="ja">
3      <head>
4        <meta charset="utf-8">
5        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
6        <link rel="stylesheet" href="reset.css">
7        <link rel="stylesheet" href="main.css">
8        <title>ストップウォッチ</title>
9      </head>
10 
11      <body>
12       <div class="content">
13        <h3>ストップウォッチ</h3>
14         <p id="timer">0:0:0:0</p>
15          <ul id="btn">
16           <li class="btn-item" id="start" onclick=eventStart();>スタート</li>
17           <li class="btn-item" id="stop" onclick=eventStop();>ストップ</li>
18           <li class="btn-item" id="reset" onclick=eventReset();>リセット</li>
19          </ul>
20        </div>
21        <script type="text/javascript" src="main.js"></script>
22      </body>
23    </html>

javascript
1let a = 0;
2let hr = 0;
3let min = 0;
4let sec = 0;
5let mSec = 0;
6let tm;
7
8//スタートボタン
9function eventStart(){
10  a = 0;
11  hr = 0;
12  min = 0;
13  sec = 0;
14  mSec = 0;
15  tm = setInterval("count()",100);
16}
17
18//ストップボタン
19function eventStop(){
20  clearInterval(tm);
21  
22}
23
24//リセットボタン
25function eventReset(){
26  $("#timer").text("0:0:0:0");
27}
28
29//時間表示
30function count(){
31  mSec++;
32  if (mSec >=10){
33    sec ++;
34    mSec =0;
35  }
36  if(sec >= 60){
37    min++;
38    sec = 0;
39  }
40  if (min >= 60){
41    hr++;
42    min = 0;
43  }
44
45$("#timer").text(('0'+hr).slice(-1) + ":" + ('0'+min).slice(-1) + ":" + ('0'+sec).slice(-1) + ":" + ('0'+mSec).slice(-1));
46}

初学者です。
現在ストップウォッチのコードを入力しているのですが、いくつか詰まってしまった部分があったので質問いたします。
(CSSは省略しています）

###最終目標
表示　0：0：0：0
左から「時間」・「分」・「秒」・「ミリ秒」です
ミリ秒は1桁で表示。「時間」・「分」・「秒」は9までは1桁で、桁が増える（10になる）と2桁になる。

###質問
①
「秒」などが9から10に桁上がりする際に2桁にすることができず、一桁のままで0に戻ってしまう
おそらく.slice(-1)が原因だと思うのですが、これを消すと初めが二桁で桁上がりすると3桁になってしまう
（例：01→02　・・・　09→010→011...）

②
スタートを押し、カウントアップを始め、リセットボタンを押した後に再度スタートを押すと0からスタートしてしまう
リセットを押す時に、その時の数字を保存して、再度スタートを押す時にその数字を加える処理を足すと解決しそうだとは思いましたが方法が分からず詰まってしまいました。

③
スタートを2回押すと二重にsetInterval処理が始まってしまい、以降リセットを押しても効かない
始めにスタートを押すとストップやリセットを押すまで無効にすることができれば解決すると思いましたが、これも同じく方法が分かりませんでした。

以上が、現状自身が不明な点でした。一度に複数の質問をしてしまい申し訳ありませんが知恵をお貸しいただけますと幸いです。　また、上記以外にもコードに問題点が見受けられましたらご指摘いただけますとありがたいです。

int32_t

2021/09/16 13:03

> 一度に複数の質問をしてしまい質問を3つに分割したほうが回答を得やすいですよ。実際のところ、私は①と③の問題はすぐに答えられますが、②は意図を確認する必要があり、面倒になってけっきょくは回答を書かないという結論になりました。

退会済みユーザー

2021/09/16 13:18

お答えありがとうございます。 ①だけでもご教授いただけませんでしょうか。 ②と③はまた分割して質問しようと思います。

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

回答1件

ベストアンサー

こないな感じでどうかのう？

javascript
1let hr = 0;
2let min = 0;
3let sec = 0;
4let mSec = 0;
5let tm = 0;
6
7// タイマーに現タイムの文字列を設定
8function updateTimerText() {
9  $("#timer").text(`${hr}:${min}:${sec}:${mSec}`);
10}
11
12//スタートボタン
13function eventStart() {
14  if (tm > 0) return;
15
16  tm = setInterval(count, 100);
17}
18
19//ストップボタン
20function eventStop() {
21  if (tm > 0) {
22    clearInterval(tm);
23    tm = 0;
24  }
25}
26
27//リセットボタン
28function eventReset() {
29  if (tm > 0) return;
30
31  hr = 0;
32  min = 0;
33  sec = 0;
34  mSec = 0;
35
36  updateTimerText();
37}
38
39//時間表示
40function count() {
41  mSec++;
42  if (mSec >= 10) {
43    sec++;
44    mSec = 0;
45  }
46  if (sec >= 60) {
47    min++;
48    sec = 0;
49  }
50  if (min >= 60) {
51    hr++;
52    min = 0;
53  }
54  updateTimerText();
55}
56