javascriptで日時表示の時計を作成

javascriptの学習としてWebページ上に表示する時計を作成してみました。

自分用の備忘録として投稿しておきます。

下記のサイトを参考に作成しました。

現在時刻をテキストでリアルタイムに表示し続ける時計を作る方法 - JavaScript TIPSふぁくとりー

JavaScriptを使えば、現在時刻をテキストでリアルタイムに表示し続けるデジタル時計をウェブページ上に作ることも簡単にできます。現在時刻を得て、ページ上の文字列を書き換える処理を、1秒毎に自動実行するよう記述すれば良いだけです。

www.nishishi.com

version 1

See the Pen カレンダーと時計 by ウクレ寝 (@uk_masked) on CodePen.

作成手順

1、HTMLの作成

2、javascriptの作成

　①new Date();　・・・　現在の時間をインスタンス化して取得（変数「nowTime」に代入）。

　②.getFullYear() ～ .getSeconds() で「年」～「秒」までを各々取得して、各変数（var year ～ var sec）に代入。

　③日付と時間のそれぞれの表示するテキストの作成して、変数「msgDate」「msgTime」 にそれぞれ代入。

　④HTMLの日付部、時間部のidをそれぞれ「document.getElementById」で取得して、 「msgDate」「msgTime」 を代入。

　⑤setInterval(関数,処理間隔※ミリ秒)で、現在日時を表示する関数「showClock()」を動くようにする。※処理間隔はミリ秒なので、1000（1秒）にする。

　⑥時計部（時、分、秒）が1桁の時は、先頭に「0」を表示されるように関数「digit2」を定義。

3、CSSの作成

version 2

シンプルに欧文表記だけにして、CSSを書き換えてデザインもシンプルにしました。

※Webフォントは、Google fonts の「Julius Sans One」を使用。

See the Pen 時計（日時表示） version2 by ウクレ寝 (@uk_masked) on CodePen.

また、何か思いついたら新しいversionを作って、投稿しようと思います。