前提・実現したいこと
javascriptで3分タイマーを作成中で、3分経過後に"Time UP!"と表示させようと思っています。
下記のコードでエラーは出ていないのですが、3分経過しても"Time UP!"と表示されずそのままカウントが進みます。
現在の問題点は何処にあるのでしょうか。また、どのように解決したら良いのかよろしければご教示いただけないでしょうか。
よろしくお願いいたします。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>timer</title> <link rel ="stylesheet" href ="time.css"> <script> var time = 180; var timer; var setI; var min; var sec; function startTimer() { time -= 1; min = Math.floor( time / 60 ); sec = time % 60; min = ('00' + min).slice(-2); sec = ('00' + sec).slice(-2); timer = document.getElementById('timer'); timer.innerHTML = min + ":" + sec; start.disabled = "disabled"; if (time === 0) { timer.innerHTML = "Time UP!"; } else { startTimer(); } } function stopTimer() { clearInterval(setI); start.disabled = ""; console.log("test") } function resetTimer() { start.disabled = ""; clearInterval(setI); timer.innerHTML = '03:00'; } function startInterval() { setI = setInterval(startTimer,1000); } window.onload = function() { var start = document.getElementById('start'); start.addEventListener('click',startInterval,false); timer = document.getElementById('timer'); var stop = document.getElementById('stop'); stop.addEventListener('click',stopTimer,false); var reset = document.getElementById('reset'); reset.addEventListener('click',resetTimer,false); } </script> </head> <body> <div id = "box"> <div id ="timer">03:00</div> <form> <input type ="button" id ="start" name ="start" value ="スタート"> <input type ="button" id ="stop" name ="stop" value ="ストップ" > <input type ="button" id ="reset" name ="reset" value ="リセット"> </form> </div> </body> </html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー