経過時間と定めた目標時間との差の計算

ストップヲッチの機能で表示した時間と設定した目標時間を減算しその結果を返すツールを作成したいが知見がないので、ヒントをお教えいただきたい

html
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>

JavaScript
1'use strict';
2
3{
4  const timer = document.getElementById('timer');
5  const start = document.getElementById('start');
6  const stop = document.getElementById('stop');
7  const reset = document.getElementById('reset');
8  const math = document.getElementById('sum');
9  const mintus = document.getElementById('mintus');
10
11  let startTime;
12  let timeoutId;
13  let elapsedTime = 0;
14
15  function countUp() {
16    const d = new Date(Date.now() - startTime + elapsedTime);
17    const m = String(d.getMinutes()).padStart(2, '0');
18    const s = String(d.getSeconds()).padStart(2, '0');
19    const ms = String(d.getMilliseconds()).padStart(3, '0');
20    timer.textContent = `${m}:${s}.${ms}`;
21
22    timeoutId = setTimeout(() => {
23      countUp();
24    }, 10);
25  }
26
27  function setButtonStateInitial() {
28    start.disabled = false;
29    stop.disabled = true;
30    reset.disabled = true;
31  }
32
33  function setButtonStateRunning() {
34    start.disabled = true;
35    stop.disabled = false;
36    reset.disabled = true;
37  }
38
39  function setButtonStateStopped() {
40    start.disabled = false;
41    stop.disabled = true;
42    reset.disabled = false;
43  }
44
45  setButtonStateInitial();
46
47  start.addEventListener('click', () => {
48    setButtonStateRunning();
49    startTime = Date.now();
50    countUp();
51  });
52
53  stop.addEventListener('click', () => {
54    setButtonStateStopped();
55    clearTimeout(timeoutId);
56    elapsedTime += Date.now() - startTime;
57  });
58
59  reset.addEventListener('click', () => {
60    setButtonStateInitial();
61    timer.textContent = '00:00.000';
62    elapsedTime = 0;
63  });
64
65 
66  math.addEventListener('click', () => {
67    stop.click();
68    const timeTxt = timer.textContent.replace(":", "").replace(".", "");
69    switch (timer) {
70        case "time_1":
71            result(timeTxt - 30000);
72            break;
73        case "time_2":
74            result(timeTxt - 60000);
75            break;
76        case "time_3":
77            result(timeTxt - 130000);
78            break;
79    } 
80  });
81　　↓以下の実装が検討がつかない
82    
83  }
84}

わからない項目
表示時間ー目標時間の表示をするためにどういう実装が良いのか
（考えは表示時間３０分を３０：００と表示し、目標時間を例６０分を６０：００としその引き算を result(timeTxt - 60000)のresultの部分を出せば良いのか）
参考記事がないため何か参考なものがあればお教えいただきたい。

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

回答1件

ベストアンサー

Dateオブジェクトを.getTime()して差をとればいいです

投稿2020/09/10 03:20

yambejp

総合スコア116724

kobayashi.j

2020/09/10 04:07

ありがとうございます。 const timeresult = new Date() const timer1 = mintus.selectIndex; const timefact = timeresult.getTime() - timer1.getTime(); の考え方はあっているでしょうか？

yambejp

2020/09/10 04:32

たとえばこう const t1= new Date(); setTimeout(()=>{ const t2= new Date(); const timediff = t2.getTime() - t1.getTime(); console.log(timediff); },1000); だいたい1000ミリ秒ちょっとの時間が返ると思います

kobayashi.j

2020/09/10 04:39

ありがとうございます。参考にしてみます

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