JavaScriptでストップウォッチを作成する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでストップウォッチを作成する方法について解説しています。ストップウォッチを作成するには、日付や時刻の差分を取得する必要があります。さらに表示するために一定時間ごとに処理を行う必要があります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでストップウォッチを作成する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

ストップウォッチを作成する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ストップウォッチとは

JavaScriptでストップウォッチを作るためには、開始した時刻と開始から経過した時刻の差分を表示する方法があります。

 

日付・時間を取得できる関数

JavaScriptで日付・時刻を取得する関数として、new Date関数を使用します。

 

var nowDate = new Date();
//現在時刻を取得

 

new Date関数で代入したnowDateは現在日付の情報が格納されたインスタンスです。nowDateから日付情報を取得するために以下のメソッドを使用します。

 

nowDate.getFullYear();
//西暦年を取得します。
nowDate.getMonth();
//月を取得します。1月が0からスタートなので0~11を取得します。
nowDate.getDay();
//曜日を取得します。日曜日が0からスタートなので0~6を取得します。
nowDate.getDate();
//日にちを取得します。日にちは1からスタートです。

nowDate.getHours();
//時間を取得します。
nowDate.getMinutes();
//分を取得します。
nowDate.getSeconds();
//秒を取得します。
nowDate.getMilliseconds();
//ミリ秒を取得します。

また、「1970年1月1日 00:00:00」から指定した日付までの経過時間をミリ秒単位で取得する、getTimeメソッドもあります。

nowDate.getTime();

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

ボタン一つだけのシンプルなストップウォッチを作ってみましょう。

 

HTMLソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CreateStopwatch</title>
</head>
<body>

<input id="timer" type="text" size="30">
<input type="button" id="FlagButton" onclick="clickButton()" value="スタート"/>
<script src="js/watch.js"></script>

</body>
</html>

 

JavaScriptソース(watch.js)

var startStopFlag = 0; // スタート・ストップのフラグ

var startTime; // スタート時間
var interval;
function clickButton(){
var flagButton = document.getElementById('flagButton');

if (startStopFlag == 0){ // スタートボタンを押した
startTime = new Date(); // スタート時間を退避
startStopFlag = 1;
flagButton.value = "ストップ"
interval = setInterval("elapsedTime()",1);
}else{ // ストップボタンを押した
elapsedTime();
StartStopFlag = 0;
flagButton.value = "スタート";
clearInterval( interval );
}
}
function elapsedTime(){
// スタート時間と経過時間の差分を取得し、時・分・秒・ミリ秒・を抜き出していく
var stopTime = new Date(); // 経過時間を退避
var elapsed = stopTime.getTime() ? startTime.getTime(); // 経過時間の差分を取得
var H = Math.floor(elapsed / (60 * 60 * 1000)); // 時間取得
elapsed = elapsed ? (H * 60 * 60 * 1000);
var M = Math.floor(elapsed / (60 * 1000)); // 分取得
elapsed = elapsed ? (M * 60 * 1000);
var S = Math.floor(elapsed / 1000); // 秒取得
var MS = elapsed % 1000; // ミリ秒取得
var timer = document.getElementById('timer');
timer.value = H + ":" + M + ":" + S + ":" + MS;
}

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。