初心者です。
jsで3分のカウントダウンタイマーを作り、3分経過後に’TIME UP!’と表示させたいです。
スタート、ストップ、リセットは正常に動くのですが、スタート後残り1秒になったあと動かなくなります。
どのようにすると良いのでしょうか?
よろしくお願いいたします。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="js9.css"> <script> var interval_id; var start_click = false; var time = 180; var min = 0; var sec = 0; function count_start(){ if(start_click === false){ interval_id = setInterval(count_down , 1000); start_click = true; } } function count_down(){ var display = document.getElementById('display'); if (time === 1 ){ display.innerHTML = 'TIME UP!'; }else{ time--; min = Math.floor(time / 60); sen = Math.floor(time % 60); display.innerHTML = '0' + min +':' + sen ; } if (sen<10) { display.innerHTML = '0' + min + ':' + '0' + sen; } } function count_stop(){ clearInterval(interval_id); start_click = false; } function count_reset(){ time = 180; min = 0; sen = 0; var reset = document.getElementById('display'); reset.innerHTML = '03:00'; } window.onload = function(){ var start = document.getElementById('start'); start.addEventListener('click' , count_start , false); var stop = document.getElementById('stop'); stop.addEventListener('click', count_stop , false ); var reset = document.getElementById('reset'); reset.addEventListener('click', count_reset , false ); } </script> </head> <body> <div id = 'timer'> <div id = 'box'> <p id = 'display'>03:00</p> <div id= 'button'> <button id = 'start'>スタート</button> <button id = 'stop'>ストップ</button> <button id = 'reset'>リセット</button> </div> </div> </div> </body> </html>
###試したこと
function count_down(){
var display = document.getElementById('display');
if (time === 1 ){
display.innerHTML = 'TIME UP!';
この後にクリアインターバルが必要なのかと思い入れましたがダメでした。
他の方が同じ課題を作ったものでdocument.getElementByIdをifの中に入れているものを見たので、同じように中に入れたのですがダメでした。
回答3件
あなたの回答
tips
プレビュー