タイマーをJavaScriptで作成しました。
リセット時や初期値を除いて、タイマーのカウントが0になったとき、という条件定義はどのようにすれば
いいのでしょうか。
下記がコードになります。
よろしくお願いします。
JavaScript
1window.onload = function(){ 2 3 var sound = document.getElementById("sound"); 4 5 var timer = document.getElementById('timer') 6 var set = document.getElementById('set') 7 var reset = document.getElementById('reset') 8 var start = document.getElementById('start') 9 10 // クリック時の時間を取得する 11 var startTime; 12 13 var timeLeft; 14 var timeToCountDown = 0; 15 var timerId; 16 var isRunning = false; 17 18 // 残り時間を表示させる 19 function updateTimer(t) { 20 var d = new Date(t); 21 var m = d.getMinutes(); 22 var s = d.getSeconds(); 23 m = ('0' + m).slice(-2); 24 s = ('0' + s).slice(-2); 25 timer.textContent = m + ':' + s; 26 } 27 28 function countDown() { 29 timerId = setTimeout(function() { 30 timeLeft = timeToCountDown - (Date.now() - startTime); 31 if (timeLeft < 0) { 32 isRunning = false; 33 start.textContent = 'Start'; 34 clearTimeout(timerId); 35 timeLeft = 0; 36 timeToCountDown = 0; 37 updateTimer(timeLeft); 38 return; 39 } 40 updateTimer(timeLeft); 41 countDown(); 42 }, 100); 43 } 44 45 start.addEventListener('click', function() { 46 // タイマーが0のときはストップと表示するようにする 47 if (isRunning === false) { 48 isRunning = true; 49 start.textContent = 'Stop' 50 startTime = Date.now(); 51 countDown(); 52 } else { 53 // タイマーがstopのときはstartと表示する 54 isRunning = false; 55 start.textContent = 'Start'; 56 timeToCountDown = timeLeft; 57 clearTimeout(timerId); 58 } 59 }); 60 61 // Setを押した時の処理 62 set.addEventListener('click', function() { 63 // タイマーが動いているときは操作できないようにする 64 if (isRunning === true){ 65 return; 66 } 67 // timeToCountDownを25分にセットする処理を書いていく 68 timeToCountDown += 1500 * 1000; 69 // 25分を超えても 70 if (timeToCountDown >= 60 * 26 * 1000) { 71 // 25分になるように設定 72 timeToCountDown = 1500 * 1000; 73 } 74 // timeToCountDownをタイマーに反映 75 updateTimer(timeToCountDown); 76 }); 77 78 reset.addEventListener('click', function() { 79 // timeToCountDownを0にする処理を書いていく 80 timeToCountDown = 0; 81 // timeToCountDownをタイマーに反映 82 updateTimer(timeToCountDown); 83 }); 84}();
回答3件
あなたの回答
tips
プレビュー