JavaScript

【プログラミング初心者向け】JavaScriptでカウントアップを止める方法

プログラミングでよく使う時間に関するコードですが、

この記事では、カウントアップしている時間を止める方法をプログラミング初心者にもわかりやすく解説します。

 

この記事で、登場するカウントアップを行う部分については、下記、記事で詳しく解説してますので、こちらをご確認ください。

JavaScriptでカウントアップを実装するコードを初心者向けに解説プログラミングでは、時間に関する実装をよく行いますが、今回は、JavaScriptでストップウォッチのように、時間をカウントしていくコー...

 

JavaScriptでカウントアップを止めるコード

まずは、全体のコードです。

index.htmlは、最低限の記載です。

今回は、スタートボタンを押すとタイマーが動き、ストップボタンを押すとタイマーが止まるコードです。

<!DOCTYPE html>
<html lang="ja">

<head>
  <!-- cssのリンク -->
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- タイマー部分 -->
  <div class="conteiner">
    <div id="timer">00:00,000</div>
    <div class="btns">
      <div  class="btn" id="start">start</div> 
      <div  class="btn" id="stop">stop</div> 
    </div>
  </div>

  <!-- JavaScriptを呼び出し -->
  <script src="js/main.js"></script>

</body>

</html>

 

style.cssも最低限です。

.conteiner{
  margin: 2px auto;
  width: 270px;
  background-color:#fff;
  padding: 15px;
  text-align: center;
}

#timer{
  background-color: gray;
  font-size: 40px;
  height: 120px;
  line-height: 120px;
  margin-bottom: 15px;
}

.btns{
  display: flex;
  justify-content: space-between;
}

.btn{
  width: 270px;
  height: 45px;
  line-height: 45px;
  background-color: #ddd;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  border: gray 1px solid;
}

 

こちらがJavaScriptを記載したmain.jsです。

以下で章で詳しく説明します。

 const timer = document.getElementById('timer');
 const start=document.getElementById("start");
 const stop=document.getElementById("stop");

 let startTime;
 let timeoutId;


start.addEventListener('click', () => {
  startTime = Date.now();
  console.log(startTime);
  console.log(new Date(startTime))
  countUp();
});

 function countUp() {
  const d=new Date(Date.now()-startTime);
  const m=String(d.getMinutes()).padStart(2,"0");
  const s=String(d.getSeconds()).padStart(2,"0");
  const ms =String(d.getMilliseconds()).padStart(3,"0");
  timer.textContent = `${m}:${s},${ms}`;


  timeoutId = setTimeout(() => {
    countUp();
  }, 10);
 }

  stop.addEventListener('click', () => {
    clearTimeout(timeoutId);
  });

 

JavaScriptでカウントアップを止める解説

まず、理解がしやすいように先にタイマーがカウントアップしていく仕組みについて解説します。

簡単にいれば、スタートボタンを押したことにより、カウントアップが1回されます。

これだけだと、1回のカウントで終わってしまうので、タイマーのカウントが1つ増えるだけなのですが、setTimeout()メソッド関数を使うことで、この作業を繰り返し行うことができます。

つまり、カウントアップは、タイマーを1つ進める作業を、繰り返すことによりカウントアップが連続的に行っているのです。

逆にいえば、今回解説するカウントアップを止める方法は、この繰り返しの作業を終了させれることです。

では、コードを解説しています。

//  ストップボタンのIDを取得
 const stop=document.getElementById("stop");
 
//ストップを行う変数を定義 
 let timeoutId;

まず、ここの部分では、スタートボタンのIDを取得し、あとで説明する繰り返しをしている繰り返しを終わらせる引数をセットするための変数を定義しておきます。

//繰り返しを行うsetTimeout()メソッド関数をtimeoutIdにセットする。
  timeoutId = setTimeout(() => {
    countUp();
  }, 10);
 }

setTimeout()は繰り返しを行うメソッド関数で、この場合、coutUpを10ミリ秒ごと繰り返しているのですが、このsetTimeout()を上記でセットしたtimeoutId変数に格納します。

※setTimeout()メソッド関数の詳しい解説かこちらの記事でご確認ください。

JavaScriptでカウントアップを実装するコードを初心者向けに解説プログラミングでは、時間に関する実装をよく行いますが、今回は、JavaScriptでストップウォッチのように、時間をカウントしていくコー...
//ストップボタンをクリックすることでイベントが発生
  stop.addEventListener('click', () => {
// clearTimeout()で繰り返しを終了する。
    clearTimeout(timeoutId);
  });

addEventListener()メゾットは、指定されたイベントが行うたびに起動する関数で、今回の場合「stop」ボタンが”click”させたら、アロー関数(()=>)の中のコードが呼び出されます。

今回の場合、「stop」ボタンが”click”されると、clearTimeout()が起動します。

clearTimeout()メソッド関数ですが、繰り返しを終了されるメソッド関数で、引数(”()の中”)に書かれた繰り返しを終了させます。

今回の場合、上記で繰り返しのメゾット関数を格納したtimeoutIdという変数を引数に入れることで、カウントアップの繰り返しを終了させます。

 

以上の記述で、カウントアップを止めることができます。