JavaScriptでカウントダウンアプリを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、カウントダウンアプリをJavaScriptで実装したいと思います。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

demoのカウントダウン切り替えのキーは、「transform-origin」です。これで、切り替え時の原点を指定しています。

JavaScriptの実装

それでは、JavaScriptを実装していきましょう。

カウントダウンのアニメーションは、CSSがほぼやってくれます。

カウントダウンの動きは、以下のspan要素に「”in” or “out”」クラスを付け替えることによって実現します。

そして、最終的に、finalクラスが付与されたHTML要素に「show」クラスを追加することで、「Go」が表示されます。

このような流れです。

要素の取得

最初に、画面操作に必要な要素を取得します。

カウントダウン実行関数の定義

次は、カウントダウンを実行する関数を定義しましょう。

上記では、取得したspan要素分だけ、処理を実行します。

animationendイベントの登録

次は、animationendイベントを登録します。これは、その名の通り、CSSのアニメーションが終了した時に発火されるイベントです。

CSSのアニメーションとして、「goIn」、「goOut」を設定しているので、これらが終了したら実行されるということです。

条件によってクラスの付け替えを行う

前述の通り、特定のクラスをHTML要素につけることで、カウントダウン処理を実現します。

条件は全部で3つあるので、以下のように実装しましょう。

ここまで実装するとアニメーションが動きます。

リセット機能の実装

最後に、カウントダウンをリセットする機能を作成しましょう。

これで、Replayボタンを押下したときに、初期状態に戻しつつ、カウントダウンをやり直してくれるようになります。

これで、完成です。

おわりに

今回の講義も大変勉強になりました。カウントダウンアプリって、ありそうでないですよね。

CSSのアニメーションとJavaScriptを組み合わせれば、かなり色々なアプリケーションが作れそうです。

やはり、JavaScriptの次は、CSSを学ぶか…

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す