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

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

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

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

Q&A

解決済

1回答

4509閲覧

3分タイマー ストップボタンを押しても止まらないです。

chucky

総合スコア24

JavaScript

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

2グッド

1クリップ

投稿2016/05/15 08:24

編集2016/05/15 08:36

三分タイマーですがストップボタンを押しても止まらないです。

次にリセットボタンを押すと自動的に3分からカウントが始まります。
リセットボタンを押すと表示はカウントしないで3分のままで表示したいんですが
どうすればよいでしょうか??

すいませんがご指導お願い致します。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>カウントダウンタイマー</title> <script> window.onload = function(){ var time = 10; var counter; var min = document.getElementById("min"); var sec = document.getElementById("sec"); var start = document.getElementById("start"); var stop = document.getElementById("stop"); var reset = document.getElementById("reset"); start.onclick = function() { toggle(); counter = setInterval( count, 1000 ); } stop.onclick = function() { toggle(); clearInterval( counter ); } reset.onclick = function() { time = 180; min.innerHTML = Math.floor( time / 60 ); sec.innerHTML = Math.floor( time % 60 ); clearInterval( counter ); } function toggle() { if( start.disabled ) { start.disabled = false; stop.disabled = true; } else { start.disabled = true stop.disabled = false; } } function count() { if( time === 0 ) { sec.innerHTML = 0; min.innerHTML = 0; toggle(); //alert("Time UP!"); document.write("Time UP"); clearInterval( counter ); } else { time -= 1; sec.innerHTML = time % 60; min.innerHTML = Math.floor( time / 60 ); } } } </script> </head> <body> <div id="timer"> <p> <span id="min">00</span> <span id="sec">00</span> </p> <p> <input type="button" id="start" value="スタート"> <input type="button" id="stop" value="ストップ" disabled> <input type="button" id="reset" value="リセット"> </p> </div> </body> </html>
Suzumi41, mhashi👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

リセットを行う際にclearInterval( counter );が無いのが原因の様です。

リセットをクリックしても、残り時間が3分に戻るのみで、
タイマーが減っていく処理が続いているみたいですね。

[追記]コメントを拝見しまして、修正を行ったコードも追記致します。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>カウントダウンタイマー</title> 6 <script> 7 window.onload = function(){ 8 var time = 10; 9 var counter; 10 var min = document.getElementById("min"); 11 var sec = document.getElementById("sec"); 12 var start = document.getElementById("start"); 13 var stop = document.getElementById("stop"); 14 var reset = document.getElementById("reset"); 15 16 start.onclick = function() { 17 toggle(); 18 counter = setInterval( count, 1000 ); 19 } 20 stop.onclick = function() { 21 toggle(); 22 clearInterval( counter ); 23 } 24 25 reset.onclick = function() { 26 time = 180; 27 min.innerHTML = Math.floor( time / 60 ); 28 sec.innerHTML = Math.floor( time % 60 ); 29 //ここから修正箇所です 30 clearInterval( counter ); //タイマーを停止させます 31 if( start.disabled ) { //タイマーがスタートしていた場合は… 32 toggle(); //…ストップをクリックした際と同様にボタンを元に戻します 33 } 34 //修正箇所はここまでです 35 } 36 37 function toggle() { 38 if( start.disabled ) { 39 start.disabled = false; 40 stop.disabled = true; 41 } else { 42 start.disabled = true 43 stop.disabled = false; 44 } 45 } 46 47 function count() { 48 if( time === 0 ) { 49 sec.innerHTML = 0; 50 min.innerHTML = 0; 51 toggle(); 52 //alert("Time UP!"); 53 document.write("Time UP"); 54 clearInterval( counter ); 55 } else { 56 time -= 1; 57 sec.innerHTML = time % 60; 58 min.innerHTML = Math.floor( time / 60 ); 59 } 60 } 61 } 62 63 </script> 64</head> 65<body> 66 <div id="timer"> 67 <p> 68 <span id="min">00</span> 69 <span id="sec">00</span> 70 </p> 71 <p> 72 <input type="button" id="start" value="スタート"> 73 <input type="button" id="stop" value="ストップ" disabled> 74 <input type="button" id="reset" value="リセット"> 75 </p> 76 </div> 77</body> 78</html>

投稿2016/05/15 08:27

編集2016/05/15 08:42
gzrita

総合スコア236

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

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

chucky

2016/05/15 08:35

ご指導ありがとうございます。 リセットの所に clearInterval( counter ); を入れたんですが まだカウントが始まりますね。。。。
gzrita

2016/05/15 08:43

質問で頂いたコードへ実際に修正を行ったのですが、どうもうまく動いている様です。 コードをそのまま追記していますので、一度ご確認いただけないでしょうか。
chucky

2016/05/15 08:54

僕が見逃していました。 ご親切にご指導いただきありがとうございました。 助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問