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

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

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

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

Q&A

解決済

2回答

3834閲覧

javascript カウントダウンタイマー3分

chidayo

総合スコア2

JavaScript

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

0グッド

0クリップ

投稿2020/05/11 08:52

1カウントは03:00からスタートする
2スタートボタンを押すと1秒ずつカウントが進む
3カウントが00:00になったら「Time UP!」と表示する
4ストップボタンを押すとカウントが止まる
5リセットボタンを押すとカウントが03:00に戻り、カウントが止まる
↑↑を実行したいのですが実行されません。
どうしたら良いでしょうか??``````
ここに言語を入力

コード ```<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>カウント</title> <link rel="stylesheet" href="timer.css"> </head> <body> <div id="timer">3:00</div> <button id="start">スタート</button> <button id="stop">ストップ</button> <button id="reset">リセット</button> <script> var timerid = 0; var count = 0; var start = document.getElementById('start'); var stop = document.getElementById('stop'); var reset = document.getElementById('reset'); var timer = document.getElementById('timer'); function start_down() { count--; if (count == 0) { clearInterval(timerid); } display(); } function display() { if (count > 0) { var min = Math.floor(count / 60); var sec = count % 60; timer.innerHTML = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2); } else { timer.innerHTML = 'Timeup'; } } function start_on(){ timerid = setInterval(countdown, 1000); } function stop_on() { clearInterval(timerid); } function reset_on() { count = 180; display(); } window.onload = function() { start.addEventListener('click',start_on,false); stop.addEventListener('click',stop_on,false); reset.addEventListener('click',reset_on,false); } </script> </body> </html>

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

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

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

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

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

yambejp

2020/05/11 08:55

> スタートボタンを押すと1秒ずつカウントが進む は、スタートボタンおした瞬間2:59になるのか、 1秒間は3:00となっていて、1秒後に2:59になるのか? どっちでしょう
chidayo

2020/05/11 09:51

申し訳ありません。 3:00となっていて、1秒後に2:59になる方です。
guest

回答2

0

ベストアンサー

こんにちは、以下のコードでどうでしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>カウント</title> 6 <link rel="stylesheet" href="timer.css" /> 7 </head> 8 <body> 9 <div id="timer">3:00</div> 10 <button id="start">スタート</button> 11 <button id="stop">ストップ</button> 12 <button id="reset">リセット</button> 13 <script> 14 var timerid = 0; 15 var count = 180; 16 var start = document.getElementById("start"); 17 var stop = document.getElementById("stop"); 18 var reset = document.getElementById("reset"); 19 var timer = document.getElementById("timer"); 20 function start_down() { 21 count--; 22 if (count <= 0) { 23 clearInterval(timerid); 24 } 25 display(); 26 } 27 function display() { 28 if (count > 0) { 29 var min = Math.floor(count / 60); 30 var sec = count % 60; 31 timer.innerHTML = ("0" + min).slice(-2) + ":" + ("0" + sec).slice(-2); 32 } else { 33 timer.innerHTML = "Timeup"; 34 } 35 } 36 function start_on() { 37 start_down(); 38 timerid = setInterval(start_down, 1000); 39 } 40 function stop_on() { 41 clearInterval(timerid); 42 } 43 function reset_on() { 44 stop_on(); 45 count = 180; 46 display(); 47 } 48 window.onload = function () { 49 start.addEventListener("click", start_on, false); 50 stop.addEventListener("click", stop_on, false); 51 reset.addEventListener("click", reset_on, false); 52 }; 53 </script> 54 </body> 55</html> 56

投稿2020/05/11 11:24

fake_shibe

総合スコア806

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

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

chidayo

2020/05/11 23:14

ちゃんと動作しました。 ありがとうございました。
guest

0

元ソースを流用してこんな感じで

投稿2020/05/11 11:15

yambejp

総合スコア114581

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

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

yambejp

2020/05/11 11:15

window.addEventListener('DOMContentLoaded', ()=>{ var defaultTime=5; var timerid = 0; var count = defaultTime; var start = document.querySelector('#start'); var stop = document.querySelector('#stop'); var reset = document.querySelector('#reset'); var timer = document.querySelector('#timer'); display(); function start_down() { count--; if (count == 0) { clearInterval(timerid); } display(); } function display() { if (count > 0) { var min = Math.floor(count / 60); var sec = count % 60; timer.textContent = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2); } else { timer.textContent = 'Timeup'; stop_on(); } } function countdown(){ count--; display(); } function start_on(){ stop_on(); timerid = setInterval(countdown, 1000); } function stop_on() { clearInterval(timerid); } function reset_on() { stop_on(); count = defaultTime; display(); } start.addEventListener('click',start_on,false); stop.addEventListener('click',stop_on,false); reset.addEventListener('click',reset_on,false); });
shiracamus

2020/05/11 11:19

回答を編集すればコードブロックにソースを書けますよ。
yambejp

2020/05/11 11:22 編集

ごめんなさい、会社のセキュリティポリシーで 書き込み禁止サイトに指定されており 回答欄に僅かな文字しかかけないんです(泣)
chidayo

2020/05/11 23:14

ありがとうございました。 今後の参考にさせて頂きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問