ページをロードしたり、閉じて開きなおしても継続的に計測できるようにしたい

実現したいこと

労働時間を記録するようなストップウォッチを作成したいです。ページをロードしたり、閉じて開きなおしても計測している時間が維持され、そのままstartボタンなどの操作で継続的に計測できるようにしたいです。

前提

JSでコーティングをしております。
データをとどめておくために、
saveDataとshowTimeという関数を作成して実現しようとしています。

発生している問題・エラーメッセージ

ページのロードと再起動によるデータの保存はできているのですが、そこからstartボタンをクリックする操作によって、計測が０から再開してしまします。

Javascript
1let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
2let [OvertimeMilliseconds, OvertimeSeconds, OvertimeMinutes, OvertimeHours] = [0, 0, 0, 0];
3let timerRef = document.querySelector('.timerDisplay');
4let overTimeRef = document.querySelector(`.overTimeDisplay`);
5let int = null;
6
7document.getElementById('startTimer').addEventListener('click', () => {
8    // if (int !== null) {
9    //     clearInterval(int);
10    // }
11    int = setInterval(displayTimer, 10);
12    saveData();
13    showTime();
14});
15
16document.getElementById('pauseTimer').addEventListener('click', () => {
17    clearInterval(int);
18    saveData();
19});
20
21document.getElementById('resetTimer').addEventListener('click', () => {
22    clearInterval(int);
23    [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
24    timerRef.innerHTML = '00 : 00 : 00';
25    saveData();
26});
27
28document.getElementById('overtimeReset').addEventListener('click', () => {
29    clearInterval(int);
30    [OvertimeMilliseconds, OvertimeSeconds, OvertimeMinutes, OvertimeHours] = [0, 0, 0, 0];
31    overTimeRef.innerHTML = '00 : 00 : 00';
32    saveData();
33});
34
35function displayTimer() {
36    milliseconds += 10;
37
38    if (milliseconds == 1000) {
39        milliseconds = 0;
40        seconds++;
41
42        if (seconds == 60) {
43            seconds = 0;
44            minutes++;
45
46            if (minutes == 60) {
47                minutes = 0;
48                hours++;
49            }
50        }
51    }
52
53
54    let h = hours < 10 ? "0" + hours : hours;
55    let m = minutes < 10 ? "0" + minutes : minutes;
56    let s = seconds < 10 ? "0" + seconds : seconds;
57
58
59    timerRef.innerHTML = ` ${h} : ${m} : ${s}`;
60
61    if (s >= 8) {
62        overtimeDisplayTimer();
63    }
64saveData();
65}
66
67function overtimeDisplayTimer() {
68    OvertimeMilliseconds += 10;
69
70    if (OvertimeMilliseconds == 1000) {
71        OvertimeMilliseconds = 0;
72        OvertimeSeconds++;
73
74        if (OvertimeSeconds == 60) {
75            OvertimeSeconds = 0;
76            OvertimeMinutes++;
77
78            if (OvertimeMinutes == 60) {
79                OvertimeMinutes = 0;
80                OvertimeHours++;
81            }
82        }
83    }
84
85
86    let h = OvertimeHours < 10 ? "0" + OvertimeHours : OvertimeHours;
87    let m = OvertimeMinutes < 10 ? "0" + OvertimeMinutes : OvertimeMinutes;
88    let s = OvertimeSeconds < 10 ? "0" + OvertimeSeconds : OvertimeSeconds;
89
90
91    overTimeRef.innerHTML = ` ${h} : ${m} : ${s}`;
92    saveData();
93}
94
95
96function saveData() {
97    localStorage.setItem("time", timerRef.innerHTML);
98    localStorage.setItem("overtime", overTimeRef.innerHTML);
99}
100
101function showTime() {
102    const savedTime = localStorage.getItem("time");
103    const savedOvertime = localStorage.getItem("overtime");
104    if (savedTime !== null) {
105        timerRef.innerHTML = savedTime;
106    }
107    if (savedOvertime !== null) {
108        overTimeRef.innerHTML = savedOvertime;
109    }
110}
111
112showTime();
113

y_waiwai

2023/03/26 05:04

このままではコードが読みづらいので、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

退会済みユーザー

2023/03/26 06:17

マルチポスト https://qiita.com/takuonda/questions/c028d51dad761b12e7e7 マルチポストの何が悪いんだとか思っているなら、ここ https://butao.hatenadiary.com/entry/2015/02/14/021225 とか読んでみましょう。

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

回答1件

startボタンをクリックするたびに、計測が0から再開される問題は、displayTimer()関数の中でhours、minutes、seconds、millisecondsをリセットしていないためです。これらの変数をリセットすることで、計測を再開する代わりに、前回の計測時間から再開できます。

以下は、displayTimer()関数を修正して、変数をリセットする方法の例です。

javascript
1Copy code
2function displayTimer() {
3  milliseconds += 10;
4
5  if (milliseconds == 1000) {
6    milliseconds = 0;
7    seconds++;
8
9    if (seconds == 60) {
10      seconds = 0;
11      minutes++;
12
13      if (minutes == 60) {
14        minutes = 0;
15        hours++;
16      }
17    }
18  }
19
20  let h = hours < 10 ? "0" + hours : hours;
21  let m = minutes < 10 ? "0" + minutes : minutes;
22  let s = seconds < 10 ? "0" + seconds : seconds;
23
24  timerRef.innerHTML = ` ${h} : ${m} : ${s}`;
25
26  if (s >= 8) {
27    overtimeDisplayTimer();
28  }
29  saveData();
30}
31
32function overtimeDisplayTimer() {
33  OvertimeMilliseconds += 10;
34
35  if (OvertimeMilliseconds == 1000) {
36    OvertimeMilliseconds = 0;
37    OvertimeSeconds++;
38
39    if (OvertimeSeconds == 60) {
40      OvertimeSeconds = 0;
41      OvertimeMinutes++;
42
43      if (OvertimeMinutes == 60) {
44        OvertimeMinutes = 0;
45        OvertimeHours++;
46      }
47    }
48  }
49
50  let h = OvertimeHours < 10 ? "0" + OvertimeHours : OvertimeHours;
51  let m = OvertimeMinutes < 10 ? "0" + OvertimeMinutes : OvertimeMinutes;
52  let s = OvertimeSeconds < 10 ? "0" + OvertimeSeconds : OvertimeSeconds;
53
54  overTimeRef.innerHTML = ` ${h} : ${m} : ${s}`;
55  saveData();
56}
57
58function resetTimer() {
59  clearInterval(int);
60  [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
61  [OvertimeMilliseconds, OvertimeSeconds, OvertimeMinutes, OvertimeHours] = [0, 0, 0, 0];
62  timerRef.innerHTML = "00 : 00 : 00";
63  overTimeRef.innerHTML = "00 : 00 : 00";
64  saveData();
65}

上記のコードでは、resetTimer()関数が新たに追加され、hours、minutes、seconds、milliseconds、OvertimeHours、OvertimeMinutes、OvertimeSeconds、OvertimeMillisecondsをすべてリセットし、timerRefとoverTimeRefにそれぞれ "00 : 00 : 00"を設定しています。resetTimer()関数は、"resetTimer"ボタンのクリック時に呼び出されます。

投稿2023/03/26 06:27