記事内に商品プロモーションを含む場合がありますプログラミングでよく使う時間に関するコードですが、この記事では、カウントアップしている時間を止める方法をプログラミング初心者にもわかりやすく解説します。この記事で、登場するカウントアップを行う部分については、下記、記事で詳しく解説してますので、こちらをご確認ください。「本当に稼ぎたい!」「絶対に転職してやる!」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。※いつまで実施しているかはわかりません。ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね!JavaScriptでカウントアップを止めるコードまずは、全体のコードです。index.htmlは、最低限の記載です。今回は、スタートボタンを押すとタイマーが動き、ストップボタンを押すとタイマーが止まるコードです。src="js/main.js"></script></body></html>style.cssも最低限です。solid;}こちらがJavaScriptを記載したmain.jsです。以下で章で詳しく説明します。});JavaScriptでカウントアップを止める解説まず、理解がしやすいように先にタイマーがカウントアップしていく仕組みについて解説します。簡単にいれば、スタートボタンを押したことにより、カウントアップが1回されます。これだけだと、1回のカウントで終わってしまうので、タイマーのカウントが1つ増えるだけなのですが、setTimeout()メソッド関数を使うことで、この作業を繰り返し行うことができます。カウントアップは、タイマーを1つ進める作業を、繰り返すことによりカウントアップが連続的に行っているのです。逆にいえば、今回解説するカウントアップを止める方法は、この繰り返しの作業を終了させれることです。コードを解説しています。timeoutId;まず、ここの部分では、スタートボタンのIDを取得し、あとで説明する繰り返しをしている繰り返しを終わらせる引数をセットするための変数を定義しておきます。//繰り返しを行うsetTimeout()メソッド関数をtimeoutIdにセットする。}setTimeout()は繰り返しを行うメソッド関数で、この場合、coutUpを10ミリ秒ごと繰り返しているのですが、このsetTimeout()を上記でセットしたtimeoutId変数に格納します。※setTimeout()メソッド関数の詳しい解説かこちらの記事でご確認ください。clearTimeout()で繰り返しを終了する。});addEventListener()メゾットは、指定されたイベントが行うたびに起動する関数で、今回の場合「stop」ボタンが”click”させたら、アロー関数(()=>)の中のコードが呼び出されます。今回の場合、「stop」ボタンが”click”されると、clearTimeout()が起動します。clearTimeout()メソッド関数ですが、繰り返しを終了されるメソッド関数で、引数(”()の中”)に書かれた繰り返しを終了させます。今回の場合、上記で繰り返しのメゾット関数を格納したtimeoutIdという変数を引数に入れることで、カウントアップの繰り返しを終了させます。以上の記述で、カウントアップを止めることができます。私もそうでしたが、独学での学習は非常に効率が悪いですし、稼げるところまで行くのは正直、難しいです。「本当に稼ぎたい!」「絶対に転職してやる!」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。※いつまで実施しているかはわかりません。ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。soraエンジニアブログ【初心者向け】JavaScriptでカウントアップを実装するコードを解説JavaScriptでカルーセルの複数画像表示するコードを解説します。エンジニアsora通勤電車に嫌気がさし、ノマドワーカーに憧れるエンジニア。仕事のご依頼は、お問い合わせからご連絡ください。このブログでは、プログラミングやIT知識について初心者向けに記事を書いています。これからプログラミングを学びたいと考えている方は、お問い合わせからメッセージをいただければアドバイスいたします。