Q&A
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 <button id="timeway">TimeWay</button> 20 <div id="sum_way"></div> 21 <div> 22 <button id="sum">計算</button> 23 <div id="sum_account" ></div> 24 </div> 25 26 27 <script src="main.js"></script> 28</body> 29</html>
javascript
1'use strict'; 2{ 3 4 5 const timer = document.getElementById('timer'); 6 const start = document.getElementById('start'); 7 const stop = document.getElementById('stop'); 8 const reset = document.getElementById('reset'); 9 const mintus = document.getElementById('mintus'); 10 const math = document.getElementById('sum'); 11 const sum_account = document.getElementById('sum_account'); 12 const timeway = document.getElementById('timeway'); 13 const sum_way = document.getElementById('sum_way'); 14 15 let startTime; 16 let timeoutId; 17 let elapsedTime = 0; 18 19 20 function countUp() { 21 const d = new Date(Date.now() - startTime + elapsedTime); 22 const m = String(d.getMinutes()).padStart(2, '0'); 23 const s = String(d.getSeconds()).padStart(2, '0'); 24 const ms = String(d.getMilliseconds()).padStart(3, '0'); 25 timer.textContent = `${m}:${s}.${ms}`; 26 27 timeoutId = setTimeout(() => { 28 countUp(); 29 }, 10); 30 } 31 32 function setButtonStateInitial() { 33 start.disabled = false; 34 stop.disabled = true; 35 reset.disabled = true; 36 } 37 38 function setButtonStateRunning() { 39 start.disabled = true; 40 stop.disabled = false; 41 reset.disabled = true; 42 } 43 44 function setButtonStateStopped() { 45 start.disabled = false; 46 stop.disabled = true; 47 reset.disabled = false; 48 } 49 50 // 残り時間の計算 51 function calculateRemaining() { 52 let timeTxt = timer.textContent.replace(":", "").replace(".", ""); 53 const timeresult = mintus.value; 54 switch(timeresult) { 55 case 'time_1': 56 const result1 = String(3000000 - timeTxt); 57 reguler(result1); 58 break; 59 case 'time_2': 60 const result2 = String(6000000 - timeTxt); 61 reguler(result2); 62 break; 63 case 'time_3': 64 const result3 = String(9000000 - timeTxt); 65 reguler(result3); 66 break; 67 } 68 } 69 //正規表現 70 function reguler(regular) { 71 const regulation = /(\d{2})(\d{2})(\d{3})/; 72 const timemath = regular.replace(regulation,'$1分$2秒$3'); 73 sum_account.innerHTML = timemath; 74 } 75 76実装中の部分 77ーーーーーーーーーーーーー 78 //途中経過の時間表示 79 function way(){ 80 var timeoutway =[]; 81 let timeTxt = timer.textContent.replace(":", "").replace(".", ""); 82 const regulation2 = /(\d{2})(\d{2})(\d{3})/; 83 const timemath2 = timeTxt.replace(regulation2,'$1分$2秒$3'); 84 timeoutway.push(timemath2) 85 console.log(timeoutway); 86 sum_way.innerHTML = timeoutway[0-4]; 87 88 } 89 ーーーーーーーーーーーーーーーーーーーー 90 setButtonStateInitial(); 91 92 start.addEventListener('click', () => { 93 setButtonStateRunning(); 94 startTime = Date.now(); 95 countUp(); 96 }); 97 98 stop.addEventListener('click', () => { 99 setButtonStateStopped(); 100 clearTimeout(timeoutId); 101 elapsedTime += Date.now() - startTime; 102 }); 103 104 reset.addEventListener('click', () => { 105 setButtonStateInitial(); 106 timer.textContent = '00:00.000'; 107 elapsedTime = 0; 108 }); 109 110 111 math.addEventListener('click', () => { 112 stop.click(); 113 calculateRemaining(); 114 }); 115 116 timeway.addEventListener('click', () => { 117 way(); 118 }); 119}
やりたい機能としてボタンを押せば、途中経過の時間をストップヲッチを止めることなく、表示させ、それを複数回行いたい
一回だけは表示できたがそれを複数回行ための方法をしらべていても見つからないので、教えていただけると助かります。
現状機能として悩んでいる部分
１ htmlのTimeWayボタンを押したらtimeTxtの値を時間表示をし、その値を配列に一回は入れることはできたがもう一回TimeWayボタンを押す時に同じ処理を１０回くらい繰り返したい
２ その配列に入ってる値をボタンを押すごとにid="sum_way"に表示をさせる
この二つが現状わからないので、お教えただけると大変助かります。
説明が下手ですいません。よろしくお願いします。
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/06 02:48
2020/10/06 03:27
2020/10/06 03:36
2020/10/06 03:45
2020/10/06 03:55
2020/10/06 03:56
2020/10/06 05:01
2020/10/06 05:13
2020/10/06 07:20
2020/10/06 07:25
2020/10/06 07:56
2020/10/06 08:21
2020/10/06 08:27
2020/10/06 08:33
2020/10/06 08:50
2020/10/06 08:51
2020/10/06 09:02
2020/10/06 14:35 編集
2020/10/07 01:40
2020/10/07 01:45