Java scriptでのタイマー作成について

前提・実現したいこと

カウントダウンタイマーを作成しています。

ファイル名: timer.html

カウントは03:00からスタートする
スタートボタンを押すと1秒ずつカウントが進む
カウントが00:00になったら「Time UP!」と表示する
ストップボタンを押すとカウントが止まる
リセットボタンを押すとカウントが03:00に戻り、カウントが止まる内容です。

現在3秒からスタートして１秒ずつカウントを進められましたが、これ以降が出来ませんでした、、
どのように追加したらよいでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<!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/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2020/01/15 22:49

コードはマークダウンのcode機能を利用してご提示ください

行動規範の内容に同意します

回答2件

遊んでみました。

<!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, 100);
}

function countStop(){
  clearInterval(counter);
}

function countReset(){
  countStop();
  time = 180;
  display();
}

function display(message){
  var messageLabel = document.getElementById('messageLabel');
  if (!message) {
    var second = time % 60;
    var minitue = Math.floor(time / 60);
    messageLabel.innerHTML = "0" + minitue + ":" +(second < 10 ? "0": "") + second; 
  } else {
  	var id=document.getElementById('message');
    messageLabel.innerHTML = message;
  }
}

/*カウントが終わったらtime up!と表示させて色を変える関数*/
function count() {
  if (time === 0) {      
    countStop();
    display("time up!");
  } else {
    time -= 1;
    display();
  }
}

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);
  display();
}

</script>
</head>
<body>
  <div class="container">
    <h1 class="title">Stop watch</h1>
    <h1 id="messageLabel"><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>

投稿2020/01/24 07:39