【開発事例】日時カウントダウンタイマー(HTML+JavaScript)
- yuji fukami
- 6月30日
- 読了時間: 2分
今回はちょっとした思いつきから始まった開発事例をご紹介します。ふと「特定の日までの残り時間をリアルタイムに見られたら、ブログやホームページにも使えるんじゃないか？」と思い、シンプルなカウントダウンタイマーを作ってみました。
🎯 どんなもの？
簡単に言うと、ある日時までの「残り◯日◯時間◯分◯秒◯ミリ秒」をリアルタイムで表示するタイマーです。HTMLとJavaScriptだけで構成されていて、ブログや自分のサイトにそのまま貼り付けられます。
💡 汎用的に使えるようにした工夫
今回のコードでは、以下の2つの変数だけを変更すれば、どんなイベントにも使い回せるようになっています：
targetLabel：表示されるイベント名（例：「今年の折り返しまで」など）
targetDateString：対象の日時（ISO形式）
この2つを好きなイベントに合わせて書き換えるだけで、「あと何日」カウントダウンが即生成されるというわけです。
🤖 AIにお任せしてみた部分
ちなみにこのタイマー、コードそのものは僕のアイデアを元にGPT（AI）に作ってもらいました。
デザインについても、基本的にはAI任せ。シンプルで見やすく、文字も大きめにしてもらっていますが、＜style＞タブ内のCSSの部分をいじればお好みにカスタマイズもできます。
あと 20日 8時間 17分 13秒 557ミリ秒（※画像はテスト時のもの）
🧩 コードを使いたい方へ
下記コードをまるごとコピペして、ブログ記事内の「HTML編集」などで貼り付ければ、そのまま動作します。
👉 コードは こちら（下部） に掲載しています。※上記 targetLabel と targetDateString を変更して使ってください。
✍ まとめ
アイデアを「思いつき」で終わらせず、こうしてサクッと形にできるのは、今の技術のおかげですね。ブログやLP（ランディングページ）、イベントサイトなど、いろんな場面で使えると思うので、よかったらぜひ参考にしてみてください！
コメント