JavaScript

【動画・サンプルコード付き】JavaScriptでつくる簡単ストップウォッチ

 


 
 

はじめに

今回は、JavaScript でつくる簡単ストップウォッチを紹介します。
 
このようなストップウォッチを作っていきます。デモはこちら
 

 
 
まず HTML と CSS でレイアウトを作り、JavaScript でスタート・ストップ・リセット機能を実装していきます。

機能はとてもシンプルですが、ミリ秒をどうやって「01:49:13」のようなストップウォッチの形にするのか、繰り返し処理をどのように書くのかがポイントです。最後には、スペースキーでスタート・ストップを行う方法も紹介します。

必要なものはテキストエディタだけです!
ぜひ、お試しください。

 
 
 

開発環境

Google Chrome
テキストエディタ
 
 
 

解説

3-1: HTML

まず index.html ファイルを新規作成し、このように HTML を追加します。

 

input type="button"

input タグはテキストや数値を入力する時に使いますが、type="button" とすることでボタンとして使うこともできます。

button タグを使って書くこともできます。

<button type="button" class="myButton" onclick="start()" id="startBtn">START</button>

 

class="myButton"

CSS でボタンを調整する時に使います。START・STOP・RESETボタンは同じデザインにするので、同じクラス名を書きます。

 

onclick="start()"

ボタンが押された時に function start() が呼ばれます。この関数は JavaScript を使って書いていきます。

 

value="START"

value はボタンのラベルです。

 

id="startBtn"

ストップウォッチが動いている時は START ボタンを押せないようにしたいので、
id を設定しておきます。押せる・押せないの処理は JavaScript で書いていきます。

 
 

このようになりましたか?

 
ボタンが小さく、隅にあるので使いづらいですね。
CSSで使いやすくしていきましょう!

 
 

3-2: CSS

Google Fonts を読み込む

検索、または以下のリンクから Google Fonts のサイトを表示します。
https://fonts.google.com/
 
 

 
 
 

 
 
 

 
 
 

 
 
 
6~11行目を追加します。

 
この時点では Web ブラウザのスタイルシートが反映されてしまい、ボタンのフォントが変わっていないかもしれません。次のステップで CSS を書くことにでフォントが適応されます。

 

CSSを書く

8~30行目を追加します。

 

これでレイアウトは完成です!
次に、JavaScript でストップウォッチ機能を実装していきます。

 
 
 

3-3: JavaScript

9~74行目を追加してください。(コードの後に説明を追記しています。)

 

setTimeout()

setTimeout (呼び出す処理, 呼び出すまでの時間) のように使います。

上のコードでは setTimeout (48~71行目, 10ミリ秒後に実行)となっています。
setTimeout 関数は1度しか呼び出されないので、71行目で再度 timer() を呼びます。

 

分、秒、ミリ秒の計算

time 変数には10ミリ秒毎に1を加算しています。(48 行目 time++;)

1秒は1000ミリ秒なので、time=100 となったときに1秒経過となります。

よって、秒は time を100で割ることで計算できます。
var sec = Math.floor(time/100);

1分は60秒なので、秒をさらに60で割ると取得できます。
var min = Math.floor(time/100/60);

ミリ秒は、100で割った時の余りになります。
var mSec = time % 100;

 
 

ブラウザで開いてみてください。
ストップウォッチは動きましたか?

 
 

最後に、スペースキーでスタート・ストップができるようにしてみます。

</script>の直前に、1~11行目のコードを追加します。

 
スペースキーのキーコード「32」が押された場合に、start() , stop() を呼ぶ処理を書いています。

エンターキーは「13」S キーは「83」など、それぞれのキーに割り当てられているコードを使うことができます。その他のキーコード一覧はこちら

 
 

これでストップウォッチは完成です!
 
 
 

動画

Part1 : HTML & CSS

Stopwatch with JavaScript (Part1 HTML & CSS)

 
Part2 : JavaScript

Stopwatch with JavaScript (Part2 JavaScript)

 
 
 

サンプルコード

 
 
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です