Q&A
あんまり答えを載せるとよろしくないのでヒントだけですが
180秒を60で割ると3になります
前提・実現したいこと
JS初心者です。
JS 3分のカウントダウンタイマーを作成しています。
以下が条件になります
・カウントは03:00からスタートする
・スタートボタンを押すと1秒ずつカウントが進む
・カウントが00:00になったら「Time UP!」と表示する
・ストップボタンを押すとカウントが止まる
・リセットボタンを押すとカウントが03:00に戻り、カウントが止まる
太文字2つを解決したいです。
発生している問題・エラーメッセージ
03:00スタートでカウントできるのですが,
スタートボタンを押すと179,178と秒数で表示されます。
検証で確認してもおエラーの表示がされないのですが、うまく表示させることができません。
また0秒になった時に'TimeUp'と表示されず、マイナスになりカウントが止まりません。
エラーメッセージ
該当のソースコード
JavaScript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>timer</title> 6}</head> 7<body> 8 <div id="display_timer">03：00</div> 9 <button id="start">スタート</button> 10 <button id="stop">ストップ</button> 11 <button id="reset">リセット</button> 12 <script> 13 //変数の宣言 14 var interval_id;//タイマー表示 15 var startButton;//スタート 16 var stopButton;//ストップ 17 var resetButton;//リセット 18 var time_sec = 180; 19 var min = 0; 20 var sec = 0; 21 22 //カウントをスタートして1秒ずつ表示させる関数 23 function start() { 24 console.log('start'); 25 interval_id = setInterval(startTimer,1000); 26 } 27 28 //カウントダウン 29 function startTimer() { 30 console.log('startTimer'); 31 time_sec--; 32 min = Math.floor(time_sec / 60); 33 sec = time_sec % 60; 34 document.getElementById('display_timer').innerHTML = time_sec; 35 if(time_sec === 0 ) 36 display_timer.innerHTML = 'Time UP!'; 37 } 38 //ストップボタンを押すとカウントが止まる 39 function stop(){ 40 console.log('stop'); 41 clearInterval(interval_id); 42 } 43 //カウントが0になった時に Time Upと表示させる関数 44 function time_up() { 45 if (count_down <= 1) { 46 document.write ('Time UP!'); 47 } 48 } 49 50 //リセットボタンを押すとカウントが止まる、3分に戻る 51 function reset() { 52 console.log('reset'); 53 var time = 180; 54 var min = 0; 55 var sec = 0; 56 var reset = document.getElementById('display_timer'); 57 reset.innerHTML = '03:00'; 58 } 59 60 //ボタンをクリックした時にイベントを実行 61 window.onload = function (){ 62 startButton = document.getElementById('start');//スタートボタン 63 startButton.addEventListener('click' , start , false); 64 stopButton = document.getElementById('stop');//ストップボタン 65 stopButton.addEventListener('click' , stop , false); 66 resetButton = document.getElementById('reset');//リセットボタン 67 resetButton.addEventListener('click' , reset , false); 68 } 69 </script> 70</body> 71</html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
sublime Text使用
JSを作成する上でコツなどございましたら、そちらも共有していただけますと幸いです。
宜しくお願いいたします。
回答3件
0
ベストアンサー
以下の箇所でminとsecを使って表示するようにしてみてください．適宜，0埋めの処理をしてください．
JavaScript
1document.getElementById('display_timer').innerHTML = time_sec;
また，残り0秒になったときにclearInterval(interval_id)の処理をしてください．
投稿2020/03/12 15:22
編集2020/03/12 15:35
総合スコア80
0
HTML
1<div id="display_timer">03：00</div>
まずここですが
HTML
1<p><div id="【任意のID1】"></div>:<div id="【任意のID2】"></div><p>
と変えて
javascript
1 function startTimer() { 2 console.log('startTimer'); 3 time_sec--; 4 min = Math.floor(time_sec / 60); 5 sec = time_sec % 60; 6 document.getElementById('display_timer').innerHTML = time_sec; 7 if(time_sec === 0 ) 8 display_timer.innerHTML = 'Time UP!'; 9 }
これの「time_sec--;」を変えて
【任意のID1】に分を、【任意のID1】を表示(document.getElementById)で
やってみたらどうですか?
投稿2020/03/13 06:45
総合スコア21
0
179,178と秒数で表示
もし、秒数を mm:ss のようなフォーマットにしたい場合は、秒（number）から文字列に変換する関数を作ると innerHTML への代入が簡単になります。
javascript
1// sec to timeformat の意味で命名 2function sec2time ( sec ){ 3 // zero padding 4 var z = function(s){ 5 return (''+s).padStart(2,'0'); 6 } 7 return z(parseInt(sec/60)) + ":" z(sec%60); 8} 9 10console.log( sec2time(180) ); // "03:00" 11// document.getElementById('display_timer').innerHTML = sec2time(time_sec);
マイナスになりカウントが止まりません。
タイムアップになってもinterval が止まっていないのが原因です。
interval_id を使ってタイマーが稼働中かどうか判別する方法があります。
clearInterval(interval_id); 直後に interval_id=null など、falsy を与えてみてください。
javascript
1if(interval_id) { 2 // interval 実行中（カウントダウンの最中） 3} 4else { 5 // interval 停止中（カウントダウンしない） 6}
投稿2020/03/14 08:45
編集2020/03/14 08:46
総合スコア5432
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。