初心者です。5回計測ができるストップウォッチをJavascriptで作成しました。
計測表示窓が1つなら簡単なのですが、timer1timer5まで表示を5つtimer5まで
示せるようにしたいのです。
そこで、変数var countを ++countで数えることにより、timer1
順に表示するよう以下のコードを作成しました。
(CSSは無くても見られるので、はぶきます。)
ここでtimer3までは計測できるのですが、timer4timer5が計測できずtimer5まで同じなのですが・・・
timer4で止まってしまいます。なぜでしょうか??
計算式はtimer1
現クリック数はclick_count id にて表示しています。
(平均値を計算するコードは、まだ書いていません。)
Javascript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width"> 6 7 <title>Click測定タイマー - 3</title> 8 9 <!-- Latest compiled and minified CSS --> 10 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 11 12 <!-- Optional theme --> 13 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 14 15 <link rel="stylesheet" href="css/style20.css"> 16</head> 17 18<body> 19 20 <h2>5回 タイマー</h2> 21 22 <div class="content2"> 23 24 25 <p4>現在クリック数<br></p4> 26 <p id="click_count">*</p> 27 28 29 </div> 30 31 <div class="content1"> 32 <p>1回目</p> 33 <p id="timer1">0.000</p> 34 <p>2回目</p> 35 <p id="timer2">0.000</p> 36 <p>3回目</p> 37 <p id="timer3">0.000</p> 38 <p>4回目</p> 39 <p id="timer3">0.000</p> 40 <p>5回目</p> 41 <p id="timer3">0.000</p> 42 <div> 43 <button id="start_stop" class="btn1 btn-lg btn-primary">START</button> 44 </div> 45 <div> 46 <button id="reset" class="btn2 btn-lg btn-danger">RESET</button> 47 </div> 48 <p2>平均値</p2> 49 <p id="timerA">0.000</p> 50 51 </div> 52 53 <script> 54 55 document.getElementById('start_stop').focus(); //STARTボタンにフォーカスする 56 57 //スタートボタン (ストップボタン)を押した回数 58 var count = 0; 59 60 var start; //開始時間 61 62 document.getElementById('start_stop').addEventListener('mousedown', function() { 63 ++count; //ボタンカウントアップしていく 64 if (this.innerHTML === 'START') { 65 if(count==1){startTimer1 = new Date();} //ストップウォッチ関数1 66 if(count==3){startTimer2 = new Date();} //ストップウォッチ関数2 67 if(count==5){startTimer3 = new Date();} //ストップウォッチ関数3 68 if(count==7){startTimer4 = new Date();} //ストップウォッチ関数4 69 if(count==9){startTimer5 = new Date();} //ストップウォッチ関数5 70 71 72 73 //クリックカウント 74 document.getElementById('click_count').innerHTML=count; 75 76 77 // STOP ボタンにする 78 this.innerHTML = 'STOP'; 79 this.classList.remove('btn-default'); 80 this.classList.add('btn-warning'); 81 82 } else { 83 //クリックカウント 84 document.getElementById('click_count').innerHTML=count; 85 86 87 if(count==2){stoptimer1();} //ストップウォッチ関数1 88 if(count==4){stoptimer2();} //ストップウォッチ関数2 89 if(count==6){stoptimer3();} //ストップウォッチ関数3 90 if(count==8){stoptimer4();} //ストップウォッチ関数4 91 if(count==10){stoptimer5();} //ストップウォッチ関数 92 93 // START ボタンにする 94 this.innerHTML = 'START'; 95 this.classList.remove('btn-warning'); 96 this.classList.add('btn-default'); 97 98 } 99 }); 100 101 //タイマー1の処理 102 var seconds1; 103 var milli1; 104 // タイマー関数1の計算 105 function stoptimer1(){ 106 var now = new Date(); 107 milli1 = now.getTime() - startTimer1.getTime(); // 差をミリ秒で 108 seconds1 = Math.floor(milli1 *1000/ 1000)/1000; // 秒を取得 109 document.getElementById('timer1').innerHTML = seconds1 110 } 111 112 //タイマー2の処理 113 var seconds2; 114 var milli2; 115 // タイマー関数2の計算 116 function stoptimer2(){ 117 var now = new Date(); 118 milli2 = now.getTime() - startTimer2.getTime(); // 差をミリ秒で 119 seconds2 = Math.floor(milli2 *1000/ 1000)/1000; // 秒を取得 120 document.getElementById('timer2').innerHTML = seconds2 121 } 122 123 //タイマー3の処理 124 var seconds3; 125 var milli3; 126 // タイマー関数3の計算 127 function stoptimer3(){ 128 var now = new Date(); 129 milli3 = now.getTime() - startTimer3.getTime(); // 差をミリ秒で 130 seconds3 = Math.floor(milli3 *1000/ 1000)/1000; // 秒を取得 131 document.getElementById('timer3').innerHTML = seconds3 132 } 133 134 //タイマー4の処理 135 var seconds4; 136 var milli4; 137 // タイマー関数4の計算 138 function stoptimer4(){ 139 var now = new Date(); 140 milli4 = now.getTime() - startTimer4.getTime(); // 差をミリ秒で 141 seconds4 = Math.floor(milli4 *1000/ 1000)/1000; // 秒を取得 142 document.getElementById('timer4').innerHTML = seconds4 143 } 144 145 //タイマー5の処理 146 var seconds5; 147 var milli5; 148 // タイマー関数5の計算 149 function stoptimer5(){ 150 var now = new Date(); 151 milli5 = now.getTime() - startTimer5.getTime(); // 差をミリ秒で 152 seconds5 = Math.floor(milli5 *1000/ 1000)/1000; // 秒を取得 153 document.getElementById('timer5').innerHTML = seconds5 154 } 155 156 //リセットボタンの処理 157 document.getElementById('reset').onclick=function(){ 158 count=0; //カウントリセット 159 document.getElementById('click_count').innerHTML=0;//デバック用-クリックカウントリセット 160 if(document.getElementById("start_stop").innerHTML = 'STOP'){ 161 document.getElementById("start_stop").innerHTML = 'START'; 162 document.getElementById("start_stop").classList.remove('btn-warning'); 163 document.getElementById("start_stop").classList.add('btn-default');} 164 document.getElementById('start_stop').focus(); //STARTボタンにフォーカスする 165 document.getElementById("timer1").innerHTML = "0.000"; //timer1リセット 166 document.getElementById("timer2").innerHTML = "0.000"; //timer2リセット 167 document.getElementById("timer3").innerHTML = "0.000"; //timer3リセット 168 document.getElementById("timer4").innerHTML = "0.000"; //timer4リセット 169 document.getElementById("timer5").innerHTML = "0.000"; //timer5リセット 170 }; 171 172 </script> 173</body> 174</html> 175コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/09 08:11