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    <select name="mintus" id ="mintus" class="mintus">
15      <option value="time_1" id="time1">30</option>
16      <option value="time_2" id="time2">60</option>
17      <option value="time_3" id="time3">90</option>
18    </select>
19  <div>
20    <button id="sum">計算</button>
21    <div id="sum_account" ></div>
22  </div>
23  
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 mintus = document.getElementById('mintus');
9  const math = document.getElementById('sum');
10  const sum_account = document.getElementById('sum_account');
11
12  let startTime;
13  let timeoutId;
14  let elapsedTime = 0;
15
16
17  function countUp() {
18    const d = new Date(Date.now() - startTime + elapsedTime);
19    const m = String(d.getMinutes()).padStart(2, '0');
20    const s = String(d.getSeconds()).padStart(2, '0');
21    const ms = String(d.getMilliseconds()).padStart(3, '0');
22    timer.textContent = `${m}:${s}.${ms}`;
23
24    timeoutId = setTimeout(() => {
25      countUp();
26    }, 10);
27  }
28
29  function setButtonStateInitial() {
30    start.disabled = false;
31    stop.disabled = true;
32    reset.disabled = true;
33  }
34
35  function setButtonStateRunning() {
36    start.disabled = true;
37    stop.disabled = false;
38    reset.disabled = true;
39  }
40
41  function setButtonStateStopped() {
42    start.disabled = false;
43    stop.disabled = true;
44    reset.disabled = false;
45  }
46
47  // 残り時間の計算
48  function calculateRemaining(timeTxt) {
49    const timeresult = mintus.value;
50    switch(timeresult) {
51      case 'time_1':
52         const result1 = 3000000 - timeTxt;
53        
54         sum_account.innerHTML = result1;
55         break;
56      case 'time_2':
57        const result2 = 6000000 - timeTxt;
58        sum_account.innerHTML = result2;
59        break;
60      case 'time_3':
61        const result3 = 9000000 - timeTxt;
62        sum_account.innerHTML = result3;
63        break;
64      }
65  }
66
67  
68
69  setButtonStateInitial();
70
71  start.addEventListener('click', () => {
72    setButtonStateRunning();
73    startTime = Date.now();
74    countUp();
75  });
76
77  stop.addEventListener('click', () => {
78    setButtonStateStopped();
79    clearTimeout(timeoutId);
80    elapsedTime += Date.now() - startTime;
81  });
82
83  reset.addEventListener('click', () => {
84    setButtonStateInitial();
85    timer.textContent = '00:00.000';
86    elapsedTime = 0;
87  });
88
89 
90  math.addEventListener('click', () => {
91    let timeTxt = timer.textContent.replace(":", "").replace(".", "");
92    stop.click();
93    calculateRemaining(timeTxt);
94  });
95}

計算結果の表示を〇〇分〇〇秒、〇〇という表示にしたいです。
何か知見をお教えくださいよろしくお願いします。

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

回答2件

ベストアンサー

表示されている数値から計算しました。

HTML
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 mintus = document.getElementById('mintus');
9	const math = document.getElementById('sum');
10	const sum_account = document.getElementById('sum_account');
11
12	let startTime;
13	let timeoutId;
14	let elapsedTime = 0;
15
16
17	function countUp() {
18		const d = new Date(Date.now() - startTime + elapsedTime);
19		const m = String(d.getMinutes()).padStart(2, '0');
20		const s = String(d.getSeconds()).padStart(2, '0');
21		const ms = String(d.getMilliseconds()).padStart(3, '0');
22		timer.textContent = `${m}:${s}.${ms}`;
23
24		timeoutId = setTimeout(() => {
25			countUp();
26		}, 10);
27	}
28
29	function setButtonStateInitial() {
30		start.disabled = false;
31		stop.disabled = true;
32		reset.disabled = true;
33	}
34
35	function setButtonStateRunning() {
36		start.disabled = true;
37		stop.disabled = false;
38		reset.disabled = true;
39	}
40
41	function setButtonStateStopped() {
42		start.disabled = false;
43		stop.disabled = true;
44		reset.disabled = false;
45	}
46
47	// 残り時間の計算
48	function calculateRemaining(timeTxt) {
49		const match = timeTxt.match(/^(\d+):(\d+.\d+)$/);
50		if (match == null) return;
51		const time = match[1] * 60 + match[2];
52		const result = mintus.children[mintus.selectedIndex].innerText * 60 - time;
53		sum_account.innerHTML = `${Math.floor(result / 60)}:${Math.round(result % 60 * 1000) / 1000}`;
54
55		// const timeresult = mintus.value;
56		// switch (timeresult) {
57		// 	case 'time_1':
58		// 		const result1 = 3000000 - timeTxt;
59
60		// 		sum_account.innerHTML = result1;
61		// 		break;
62		// 	case 'time_2':
63		// 		const result2 = 6000000 - timeTxt;
64		// 		sum_account.innerHTML = result2;
65		// 		break;
66		// 	case 'time_3':
67		// 		const result3 = 9000000 - timeTxt;
68		// 		sum_account.innerHTML = result3;
69		// 		break;
70		// }
71	}
72
73
74
75	setButtonStateInitial();
76
77	start.addEventListener('click', () => {
78		setButtonStateRunning();
79		startTime = Date.now();
80		countUp();
81	});
82
83	stop.addEventListener('click', () => {
84		setButtonStateStopped();
85		clearTimeout(timeoutId);
86		elapsedTime += Date.now() - startTime;
87	});
88
89	reset.addEventListener('click', () => {
90		setButtonStateInitial();
91		timer.textContent = '00:00.000';
92		elapsedTime = 0;
93	});
94
95
96	math.addEventListener('click', () => {
97		// let timeTxt = timer.textContent.replace(":", "").replace(".", "");
98		stop.click();
99		// calculateRemaining(timeTxt);
100		calculateRemaining(timer.textContent);
101	});
102}
103

投稿2020/09/26 10:20

Zuishin

総合スコア28660

kobayashi.j

2020/09/26 13:44

ありがとうございます。理解できてない部分があるのでconst time = match[1] * 60 + match[2]; const result = mintus.children[mintus.selectedIndex].innerText * 60 - time; sum_account.innerHTML = `${Math.floor(result / 60)}:${Math.round(result % 60 * 1000) / 1000}`; を少し説明していただけないでしょうか？

Zuishin

2020/09/26 14:06

> const match = timeTxt.match(/^(\d+):(\d+.\d+)$/); match[1] に分が、match[2] に秒以降がはいります。 > const time = match[1] * 60 + match[2]; 分を 60 倍して秒と加算することにより、全体を秒に直しています。 > const result = mintus.children[mintus.selectedIndex].innerText * 60 - time; mintus.selectedIndex は mintus の選択されたインデクスです。 30 なら 0 が、60 なら 1 が、90 なら 2 になります。 mintus.children[mintus.selectedIndex] は 30 60 90 のいずれか選択された要素になります。 mintus.children[mintus.selectedIndex].innerText は 30 60 90 のいずれか選択された値になります。それに 60 をかけることにより秒に直し、経過時間を引くことで残り時間を求めています。 > sum_account.innerHTML = `${Math.floor(result / 60)}:${Math.round(result % 60 * 1000) / 1000}`; テンプレートリテラルで Math.floor(result / 60) と Math.round(result % 60 * 1000) / 1000 を文字列中に埋め込んでいます。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals Math.floor(result / 60) は残り時間を 60 で割って小数点以下を切り捨てたもので、分を表します。 Math.round(result % 60 * 1000) / 1000 は残り時間を 60 で割った余りを 1000 倍し、小数点以下を切り捨てて 1000 で割ることにより、秒を小数点以下三桁まで求めています。これらをコロンを挟んだ両側に置くことで「分:秒」の形にしています。

kobayashi.j

2020/09/26 14:16

ありがとうございます。勉強します

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

dをグローバルに持たせるなど工夫が必要では？

javascript
1<script>
2
3'use strict';
4var d=new Date(0);
5window.addEventListener('DOMContentLoaded', ()=>{
6  const timer = document.getElementById('timer');
7  const start = document.getElementById('start');
8  const stop = document.getElementById('stop');
9  const reset = document.getElementById('reset');
10  const mintus = document.getElementById('mintus');
11  const math = document.getElementById('sum');
12  const sum_account = document.getElementById('sum_account');
13
14  let startTime;
15  let timeoutId;
16  let elapsedTime = 0;
17
18  function format_time(d){
19    const m = String(d.getMinutes()+(d.getHours()-9)*60).padStart(2, '0');
20    const s = String(d.getSeconds()).padStart(2, '0');
21    const ms = String(d.getMilliseconds()).padStart(3, '0');
22    return `${m}:${s}.${ms}`;
23  }
24  
25  function countUp() {
26    d = new Date(Date.now() - startTime + elapsedTime);
27    timer.textContent = format_time(d);
28
29    timeoutId = setTimeout(() => {
30      countUp();
31    }, 10);
32  }
33
34  function setButtonStateInitial() {
35    start.disabled = false;
36    stop.disabled = true;
37    reset.disabled = true;
38  }
39
40  function setButtonStateRunning() {
41    start.disabled = true;
42    stop.disabled = false;
43    reset.disabled = true;
44  }
45
46  function setButtonStateStopped() {
47    start.disabled = false;
48    stop.disabled = true;
49    reset.disabled = false;
50  }
51
52  function calculateRemaining(timeTxt) {
53    const m = parseInt(mintus.options[mintus.selectedIndex].textContent);
54    const result1 = new Date(d.getTime());
55    result1.setMinutes(m-result1.getMinutes());
56    result1.setSeconds(-result1.getSeconds());
57    result1.setMilliseconds(-result1.getMilliseconds());
58    sum_account.innerHTML = format_time(result1);
59  }
60
61
62
63  setButtonStateInitial();
64
65  start.addEventListener('click', () => {
66    setButtonStateRunning();
67    startTime = Date.now();
68    countUp();
69  });
70
71  stop.addEventListener('click', () => {
72    setButtonStateStopped();
73    clearTimeout(timeoutId);
74    elapsedTime += Date.now() - startTime;
75  });
76
77  reset.addEventListener('click', () => {
78    setButtonStateInitial();
79    timer.textContent = '00:00.000';
80    elapsedTime = 0;
81  });
82
83
84  math.addEventListener('click', () => {
85    let timeTxt = timer.textContent.replace(":", "").replace(".", "");
86    stop.click();
87    calculateRemaining(timeTxt);
88  });
89});
90</script>
91
92<div id="timer">00:00.000</div>
93  <button id="start">Start</button>
94  <button id="stop">Stop</button>
95  <button id="reset">Reset</button>
96    <select name="mintus" id ="mintus" class="mintus">
97      <option value="time_1" id="time1">30</option>
98      <option value="time_2" id="time2">60</option>
99      <option value="time_3" id="time3">90</option>
100    </select>
101  <div>
102    <button id="sum">計算</button>
103    <div id="sum_account" ></div>
104  </div>

調整版

javascript
1<script>
2'use strict';
3var current_d=0;
4var prev_d=0;
5window.addEventListener('DOMContentLoaded', ()=>{
6  const timer = document.querySelector('#timer');
7  const start = document.querySelector('#start');
8  const stop = document.querySelector('#stop');
9  const reset = document.querySelector('#reset');
10  const mintus = document.querySelector('#mintus');
11  const math = document.querySelector('#sum');
12  const sum_account = document.querySelector('#sum_account');
13  let timerId;
14  
15  stop.disabled=true;
16
17  const format_time=(d)=>{
18    const m = parseInt(d/60/1000).toString().padStart(2, '0');
19    const s = (parseInt(d/1000)%60).toString().padStart(2, '0');
20    const ms = (d%1000).toString().padStart(3, '0');
21    return `${m}:${s}.${ms}`;
22  };
23  start.addEventListener('click',()=>{
24    var now=new Date();
25    start.disabled=true;
26    stop.disabled=false;
27    reset.disabled=true;
28    timerId=setInterval(()=>{
29      current_d=new Date().getTime()-now.getTime()+prev_d;
30      timer.textContent=format_time(current_d);
31    },10);
32  });
33  stop.addEventListener('click',()=>{
34    start.disabled=false;
35    stop.disabled=true;
36    reset.disabled=false;
37    clearInterval(timerId);
38    prev_d=current_d;
39  });
40  reset.addEventListener('click',()=>{
41    current_d=0;
42    prev_d=0;
43    timer.textContent=format_time(current_d);
44  });
45  math.addEventListener('click',()=>{
46    const m=parseInt(mintus.options[mintus.selectedIndex].textContent);
47    sum_account.textContent=format_time(m*60*1000-current_d);
48  });
49});
50</script>
51<div id="timer">00:00.000</div>
52  <button id="start">Start</button>
53  <button id="stop">Stop</button>
54  <button id="reset">Reset</button>
55    <select name="mintus" id ="mintus">
56      <option value="time_1">30</option>
57      <option value="time_2">60</option>
58      <option value="time_3">90</option>
59    </select>
60  <div>
61    <button id="sum">計算</button>
62    <div id="sum_account" ></div>
63  </div>