前提・実現したいこと
カウントダウンタイマーを作成しています。
ファイル名: timer.html
カウントは03:00からスタートする
スタートボタンを押すと1秒ずつカウントが進む
カウントが00:00になったら「Time UP!」と表示する
ストップボタンを押すとカウントが止まる
リセットボタンを押すとカウントが03:00に戻り、カウントが止まる内容です。
現在3秒からスタートして1秒ずつカウントを進められましたが、これ以降が出来ませんでした、、
どのように追加したらよいでしょうか?
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイマー</title> <link rel="stylesheet" href="timer.css"> <script> var counter; var time = 180 function countStart( ){ counter = setInterval(count, 1000); } function countStop( ){ clearInterval(counter); } function countreset( ){ var min= document.getElementById('min'); var sec= document.getElementById('sec'); time = 180 sec.innerHTML = time % 60; min.innerHTML = '0'+Math.floor(time / 60); clearInterval(counter); } /*カウントが終わったらtime up!と表示させて色を変える関数*/ function count( ) { var min= document.getElementById('min'); var sec= document.getElementById('sec'); if( time === 0) { clearInterval(counter); } else { time -= 1; sec.innerHTML = time % 60; min.innerHTML = Math.floor(time /60); } } window.onload = function(){ var timerlavel= document.getElementById('timerLavel'); var start = document.getElementById('start_button'); var stop = document.getElementById('stop_button'); var reset = document.getElementById('reset_button'); start.addEventListener('click',countStart,false); stop.addEventListener('click',countStop,false); reset.addEventListener('click',countReset,false); } </script> </head> <body> <div class="container"> <h1 class="title">Stop watch</h1> <h1 id="timerLavel"><span id ="min">00</span>:<span id ="sec">00</span></h1> <div class="set"> <button id="start_button">スタート</button> <button id="stop_button">ストップ</button> <button id="reset_button">リセット</button> </div> </div> </body> </html>### 試したこと ここに問題に対して試したことを記載してください。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
コードはマークダウンのcode機能を利用してご提示ください
回答2件
あなたの回答
tips
プレビュー