プログラミングでよく使う時間に関するコードですが、
この記事では、カウントアップしている時間を止める方法をプログラミング初心者にもわかりやすく解説します。
この記事で、登場するカウントアップを行う部分については、下記、記事で詳しく解説してますので、こちらをご確認ください。
「最近、独学での学習に限界を感じてませんか？」
私もそうでしたが、正直、独学での学習は、非常に効率が悪いんですよね・・・
「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。
プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。
ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。
無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！
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回のカウントで終わってしまうので、タイマーのカウントが１つ増えるだけなのですが、setTimeout()メソッド関数を使うことで、この作業を繰り返し行うことができます。
つまり、カウントアップは、タイマーを１つ進める作業を、繰り返すことによりカウントアップが連続的に行っているのです。
逆にいえば、今回解説するカウントアップを止める方法は、この繰り返しの作業を終了させれることです。
では、コードを解説しています。
// ストップボタンのIDを取得
const stop=document.getElementById("stop");
//ストップを行う変数を定義
let timeoutId;まず、ここの部分では、スタートボタンのIDを取得し、あとで説明する繰り返しをしている繰り返しを終わらせる引数をセットするための変数を定義しておきます。
//繰り返しを行うsetTimeout()メソッド関数をtimeoutIdにセットする。
timeoutId = setTimeout(() => {
countUp();
}, 10);
}setTimeout()は繰り返しを行うメソッド関数で、この場合、coutUpを10ミリ秒ごと繰り返しているのですが、このsetTimeout()を上記でセットしたtimeoutId変数に格納します。
※setTimeout()メソッド関数の詳しい解説かこちらの記事でご確認ください。
//ストップボタンをクリックすることでイベントが発生
stop.addEventListener('click', () => {
// clearTimeout()で繰り返しを終了する。
clearTimeout(timeoutId);
});addEventListener()メゾットは、指定されたイベントが行うたびに起動する関数で、今回の場合「stop」ボタンが”click”させたら、アロー関数（()=>）の中のコードが呼び出されます。
今回の場合、「stop」ボタンが”click”されると、clearTimeout()が起動します。
clearTimeout()メソッド関数ですが、繰り返しを終了されるメソッド関数で、引数（”（）の中”）に書かれた繰り返しを終了させます。
今回の場合、上記で繰り返しのメゾット関数を格納したtimeoutIdという変数を引数に入れることで、カウントアップの繰り返しを終了させます。
以上の記述で、カウントアップを止めることができます。
私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。
「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。
プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。
ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。
無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！
