カウントダウン時計を作ってみた【HTMLとCSSとJS】

2019年11月15日

何を作るのか

カウントダウン時計

完成したもの




気をつけたところ

・HTMLとCSSは最適なものを使う

・コード量は少なく簡潔に行う

・日付の算出方法

今回のことで得た知識

JavaScriptの日付の扱い方。罠だとか危険だとか。。。

確かに、getMonth()が0から始まったり、getFullYearじゃないと正しい値ができなかったりと他にも色々ありそう。

ソースコード

ソースコードを見る。(Codepenで表示されます。)

デモサイト

https://temochic.com/sample/countdown-clock-sample

https://codepen.io/mattlitzinger/pen/ysowF

今回はなし

あとがき

今回は、カウントダウン時計を作成しました。

内容としては、次の誕生日が来るまで残り何日と何時間かかるのかを表示するようにしました。

本当は有名人の画像と生年月日とその他情報を表示しようと考えていたのですが、時間がかかりそうなため断念してシンプルに仕上げました。

JavaScriptの日付は少し難しい。。。