■課題
03:00からのカウントダウン式のタイマーで、
スタート、ストップ、リセットの3ボタンを
配置したものを作ります。
■つまづき点
カウントダウンが進むタイマーをうまく
ストップさせることができません。
また、ゼロまでカウントダウンしたら
タイマーを止めるという処理もできていません。
■私の設計計画
ストップボタン押下時、および
時間がゼロになった時に
stop_timer()という関数に飛ばして
そこでclearIntervalによって
カウントダウンを止めようと思っているのですが、
計画通りにいきませんでした。
■ご依頼
ストップ押下時、カウントゼロ到達時に
カウントが止まるようにするための
方策をご教示いただけますと
大変に助かります。
よろしくお願いします。
<head> <meta charset="UTF-8"> <title>入力文字の順次表示</title></head> <body> <div id="timer"></div> <button id="start_button">スタート</button> <button id="stop_button">ストップ</button> <button id="reset_button">リセット</button> </body> </html><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>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/01/04 21:42