質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

879閲覧

js カウントダウンタイマーの表示

jimsy

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2017/10/10 11:36

編集2017/10/10 13:27

初心者です。
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の中に入れているものを見たので、同じように中に入れたのですがダメでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/10 12:33

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
jimsy

2017/10/10 13:28

すいません。修正いたしました。
guest

回答3

0

以下のようにしてみてはいかがでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="js9.css"> 7 <script> 8 var interval_id; 9 var start_click = false; 10 var time = 10; 11 var min = 0; 12 var sec = 0; 13 14 function count_start() { 15 if (start_click === false) { 16 interval_id = setInterval(count_down, 1000); 17 start_click = true; 18 } 19 } 20 21 function count_down() { 22 var display = document.getElementById('display'); 23 if (time === 1) { 24 display.innerHTML = 'TIME UP!'; 25 count_stop(); 26 } else { 27 time--; 28 min = Math.floor(time / 60); 29 sec = Math.floor(time % 60); // senをsecに修正。 30 31 display.innerHTML = '0' + min + ':' + ( sec < 10 ? '0' : '') + sec;// 修正、追記。 32 } 33 } 34 35 function count_stop() { 36 clearInterval(interval_id); 37 start_click = false; 38 } 39 40 function count_reset() { 41 time = 10; 42 min = 0; 43 sec = 0; // senをsecに修正。 44 var reset = document.getElementById('display'); 45 reset.innerHTML = '00:10'; 46 47 } 48 49 window.onload = function () { 50 var start = document.getElementById('start'); 51 start.addEventListener('click', count_start, false); 52 var stop = document.getElementById('stop'); 53 stop.addEventListener('click', count_stop, false); 54 var reset = document.getElementById('reset'); 55 reset.addEventListener('click', count_reset, false); 56 } 57 </script> 58</head> 59<body> 60<div id='timer'> 61 <div id='box'> 62 <p id='display'>00:10</p> 63 <div id='button'> 64 <button id='start'>スタート</button> 65 <button id='stop'>ストップ</button> 66 <button id='reset'>リセット</button> 67 </div> 68 </div> 69</div> 70</body> 71</html>

投稿2017/10/10 13:41

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jimsy

2017/10/10 14:18

ありがとうございます! secをsenと書き間違いに気づいていませんでした。 時間表示が1桁になってしまうのを修正しようとifを追加していた為、はじめに書いた‘TIMEUP'が出なかったのですね。 ( sec < 10 ? '0' : '') この?の部分の書き方を再度教えていただけますか?
jimsy

2017/10/10 22:18

ありがとうございます。 三項演算子、知りませんでした。 勉強になります。
guest

0

ベストアンサー

'TIME UP!' と書き込んだ後 if (sen<10) { の分岐で上書きしていませんか?

動くサンプル:https://jsfiddle.net/02c7L9cr/

投稿2017/10/10 13:36

編集2017/10/10 13:37
kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jimsy

2017/10/10 14:08

ありがとうございます! ifelseで一度閉じていたのでうまくいかなかったのですね! いま書き換えたところきちんと表示されました。 ありがとうございます。
guest

0

ドットインストールの
JavaScriptでカウントダウンタイマーを作ろう
https://dotinstall.com/lessons/countdown_js
を読んでみてはいかがでしょう?

投稿2017/10/10 14:52

katoy

総合スコア22322

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jimsy

2017/10/10 15:36

ありがとうございます 読んでみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問