表示時間の計算を行いたい

ソースコード

indexhtml
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Stopwatch</title>
6  <link rel="stylesheet" href="styles.css">
7
8</head>
9<body>
10  <div id="timer">00:00.000</div>
11  <button id="start">Start</button>
12  <button id="stop">Stop</button>
13  <button id="reset">Reset</button>
14  
15  <select name="mintus">
16    <option value="time_1">30</option>
17    <option value="time_2">60</option>
18    <option value="time_3">90</option>
19  </select>
20  <div>
21    <button id="sum">計算</button>
22    <input type-text id="sum_account">
23  </div>
24
25  <script src="main.js"></script>
26</body>
27</html>

main.js


'use strict';

{
  const timer = document.getElementById('timer');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');
  const math = document.getElementById('sum');
  const mintus = document.getElementById('mintus');

  let startTime;
  let timeoutId;
  let elapsedTime = 0;

  function countUp() {
    const d = new Date(Date.now() - startTime + elapsedTime);
    const m = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    const ms = String(d.getMilliseconds()).padStart(3, '0');
    timer.textContent = `${m}:${s}.${ms}`;

    timeoutId = setTimeout(() => {
      countUp();
    }, 10);
  }

  function setButtonStateInitial() {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = true;
  }

  function setButtonStateRunning() {
    start.disabled = true;
    stop.disabled = false;
    reset.disabled = true;
  }

  function setButtonStateStopped() {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = false;
  }

  setButtonStateInitial();

  start.addEventListener('click', () => {
    setButtonStateRunning();
    startTime = Date.now();
    countUp();
  });

  stop.addEventListener('click', () => {
    setButtonStateStopped();
    clearTimeout(timeoutId);
    elapsedTime += Date.now() - startTime;
  });

  reset.addEventListener('click', () => {
    setButtonStateInitial();
    timer.textContent = '00:00.000';
    elapsedTime = 0;
  });

 math.addEventListener('click',() => {
  var fact = timer.getTime() - mintus.getTime();
  fact();
  console.log(fact);

})

}

実現したいこと

bodyのtimerの時間とselecteの値を選択した値の計算をし、その値をだす

試したこと
const math = document.getElementById('sum');
const mintus = document.getElementById('mintus');と変数に起き

var fact = timer.getTime() - mintus.getTime();
timerの値とselectの値を取得するmintusの差を表示する

補足情報（FW/ツールのバージョンなど）
言語 JavaScript　　sql　sequel pro
コード　VScode

yambejp

2020/08/04 07:48

＞bodyのtimerの時間とselecteの値を選択した値の計算をし、その値をだすごめんなさい。日本語として意味がわかりません。結局何をどうしたいのでしょうか？具体的にお願いします

kobayashi.j

2020/08/04 07:52

ストップヲッチで示した値と目標時間（select部分）の差を計算したいこちらでなんとなく分かりましたでしょうか？

yambejp

2020/08/04 07:58 編集

startをおすとカウントアップがはじまり、stopでとめる？ selectの秒数との差をだす？カウントアップしてれば秒数が見えるので差はさほどでないのでは？

kobayashi.j

2020/08/04 08:03

秒数は見れます　業務の目標とした時間と実際にかかった時間の差を表示したいのですが無理なのでしょうか？

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

回答1件

ベストアンサー

とりあえず勉強がてら書いてみました。
html部分も若干変更有ります。
Javascriptは初心者の自分が書いたため色々と突っこみどころ満載だと思います。
(秒を分に変換してなかったりとか、コードの可読性などなど)

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title>Stopwatch</title>
7
8</head>
9
10<body>
11    <div id="timer">00:00.000</div>
12    <button id="start">Start</button>
13    <button id="stop">Stop</button>
14    <button id="reset">Reset</button>
15
16    <select id="minutes">
17        <option value="time_1">30</option>
18        <option value="time_2">60</option>
19        <option value="time_3">90</option>
20    </select>
21    <div>
22        <button id="sum">計算</button>
23        <input type="text" id="sum_account">
24    </div>
25
26    <script>
27        'use strict';
28
29        {
30            const timer = document.getElementById('timer');
31            const start = document.getElementById('start');
32            const stop = document.getElementById('stop');
33            const reset = document.getElementById('reset');
34            const math = document.getElementById('sum');
35            const minutes = document.getElementById('minutes');
36
37            let startTime;
38            let timeoutId;
39            let elapsedTime = 0;
40
41            function countUp() {
42                const d = new Date(Date.now() - startTime + elapsedTime);
43                const m = String(d.getMinutes()).padStart(2, '0');
44                const s = String(d.getSeconds()).padStart(2, '0');
45                const ms = String(d.getMilliseconds()).padStart(3, '0');
46                timer.textContent = `${m}:${s}.${ms}`;
47
48                timeoutId = setTimeout(() => {
49                    countUp();
50                }, 10);
51            }
52
53            function setButtonStateInitial() {
54                start.disabled = false;
55                stop.disabled = true;
56                reset.disabled = true;
57            }
58
59            function setButtonStateRunning() {
60                start.disabled = true;
61                stop.disabled = false;
62                reset.disabled = true;
63            }
64
65            function setButtonStateStopped() {
66                start.disabled = false;
67                stop.disabled = true;
68                reset.disabled = false;
69            }
70
71            setButtonStateInitial();
72
73            start.addEventListener('click', () => {
74                setButtonStateRunning();
75                startTime = Date.now();
76                countUp();
77            });
78
79            stop.addEventListener('click', () => {
80                setButtonStateStopped();
81                clearTimeout(timeoutId);
82                elapsedTime += Date.now() - startTime;
83            });
84
85            reset.addEventListener('click', () => {
86                setButtonStateInitial();
87                timer.textContent = '00:00.000';
88                elapsedTime = 0;
89            });
90
91// 以下追加アリ
92
93            math.addEventListener('click', () => {
94                stop.click();
95                const timeTxt = timer.textContent.replace(":", "").replace(".", "");
96                const select = document.getElementsByTagName("select");
97                switch (minutes.value) {
98                    case "time_1":
99                        result(timeTxt - 30000);
100                        break;
101                    case "time_2":
102                        result(timeTxt - 60000);
103                        break;
104                    case "time_3":
105                        result(timeTxt - 130000);
106                        break;
107                }
108            })
109        }
110
111        const result = (time) => {
112            if (String(time).slice(0, 1) === "-") {
113                const answer = String(time).replace("-", "");
114                const timeLen = answer.length;
115                if (timeLen < 6) {
116                    document.getElementById("sum_account").value = "-" + answer.slice(0, timeLen - 3) + "." + answer.slice(timeLen - 3);
117                } else if (timeLen > 6) {
118                    document.getElementById("sum_account").value = "-" + answer.slice(0, 1) + ":" + answer.slice(1, timeLen - 3) + "." + answer.slice(timeLen - 3)
119                }
120            }
121            const answer = String(time);
122            const timeLen = answer.length;
123            document.getElementById("sum_account").value = answer.slice(0, timeLen - 3) + "." + answer.slice(timeLen - 3);
124        }
125
126    </script>
127</body>
128
129</html>