JavaScriptのタイマー制作課題でつまづいています
解決済
回答 3
投稿
- 評価
- クリップ 1
- VIEW 7,144
<html lang="ja">
JavaScriptの初学者です。
スクールの課題でタイマーのプログラムを
下記の通り作っているのですが、つまづいています。
問題点をご教示いただけませんでしょうか。
■課題
03:00からのカウントダウン式のタイマーで、
スタート、ストップ、リセットの3ボタンを
配置したものを作ります。
■つまづき点
カウントダウンが進むタイマーをうまく
ストップさせることができません。
また、ゼロまでカウントダウンしたら
タイマーを止めるという処理もできていません。
■私の設計計画
ストップボタン押下時、および
時間がゼロになった時に
stop_timer()という関数に飛ばして
そこでclearIntervalによって
カウントダウンを止めようと思っているのですが、
計画通りにいきませんでした。
■ご依頼
ストップ押下時、カウントゼロ到達時に
カウントが止まるようにするための
方策をご教示いただけますと
大変に助かります。
よろしくお願いします。
<head>
<meta charset="UTF-8">
<title>入力文字の順次表示</title>
<script>
function start_timer(){
var timer=document.getElementById('timer');
var starting_time=3;
var count_timer=starting_time;
var interval_id=setInterval(count_time, 1000);
function count_time(){
count_timer=count_timer-1;
count_timer_minute=Math.floor(count_timer/60);
count_timer_second=Math.floor(count_timer%60);
timer.innerHTML="0"+count_timer_minute+"分"+count_timer_second+"秒";
if(count_timer<=0){stop_timer();}
}
}
function stop_timer(){clearInterval(interval_id);}
window.onload = function() {
var start=document.getElementById('start_button');
start.addEventListener('click',start_timer,false);
var stop=document.getElementById('stop_button');
stop.addEventListener('click',stop_timer,false);
}
</script>
</head>
<body>
<div id="timer"></div>
<button id="start_button">スタート</button>
<button id="stop_button">ストップ</button>
<button id="reset_button">リセット</button>
</body>
</html>
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
ストップ押下時、カウントゼロ到達時に
カウントが止まるようにするための
方策をご教示いただけますと
大変に助かります。
単純にinterval_idの宣言をfunctionの外に出すだけで動作すると思います。
関数内のみのスコープで宣言してしまっているので、clearInterval()実行時にinterval_idが参照できていないことで、動作していないと思います。
var interval_id=null; //ここで宣言する
function start_timer(){
var timer=document.getElementById('timer');
var starting_time=3;
var count_timer=starting_time;
//var interval_id=setInterval(count_time, 1000);
interval_id=setInterval(count_time, 1000); //varを削除
function count_time(){
count_timer=count_timer-1;
count_timer_minute=Math.floor(count_timer/60);
count_timer_second=Math.floor(count_timer%60);
timer.innerHTML="0"+count_timer_minute+"分"+count_timer_second+"秒";
if(count_timer<=0){stop_timer();}
}
}以上、参考まで。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
stop_timerから見えるように、interval_idのスコープを関数の外に出してください。
2. 時間は秒単位なので、
starting_timeの初期値は3 * 60にすべきでしょう。
リセットも実装するときのことを考えるなら、
count_timerもスコープを関数の外に置くと良いでしょう。
CodePenに投稿しました。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
function start_timer(_time){
//var timer=document.getElementById('timer');
var starting_time=count_timer=_time;//同じ値を代入するのでまとめている
var interval_id=setInterval(count_time, 1000);
function stop_timer(){
clearInterval(interval_id);
}
function count_time(){
count_timer--;//count_timer=-1;
count_timer_minute=Math.floor(count_timer/60);
count_timer_second=Math.floor(count_timer%60);
console.log("0"+count_timer_minute+"分"+count_timer_second+"秒");//==innerHTML
if(count_timer<=0){stop_timer();}
}
return;
}
start_timer(10);またstarting_timeを引数で指定するよう書き換えております。ブラウザのコンソールにて実行してもらえれば動作確認可能です。最新のFirefoxとIEにて確認。
また細かな変更として
count_timer=count_timer-1; count_timer-=1;
//または
count_timer--;//デクリメントvar a=b;
var c=a;var a=c=b;投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2015/01/05 06:42