JavaScriptでバイナリ時計を作ろう

バイナリ時計 JavaScript

JavaScriptでサイドバーに設置しているバイナリ時計を作成しました。
左2列で時、真ん中2列で分、右2列で秒を表しています。

サンプルプログラム

コードの解説

Canvasの設定

17行目でJavaScriptで図形を描写する領域を作成します。
width属性とheight属性で最大サイズを指定します。

6~13行目でcanvas要素に対するスタイルを記述します。
max-width: 100%; と書くことでレスポンシブ対応させます。

変数の準備

図形を描写するための準備などをしています。
再代入しない変数は const で宣言しました。

時間を取得する関数の作成

現在の時間を取得するための関数を作成します。
hour,min,sec にそれぞれ時,分,秒が代入されます。

図形を描写する関数の作成

最初にcanvasの中身を消去してから、取得した時間に応じて図形を描写していきます。
32以上か比較する以外は、時,分,秒すべて同じ処理です。

室井
頑張ればもう少し短く書けそうな気がする。

再描画の処理

図形を描画する処理を繰り返します。
1000ミリ秒ごとに処理すると最大で1秒に近い誤差が生じるので、500ミリ秒に設定しています。

あとがき

今回は単体で動作させたかったので、CSSやJavaScriptもすべて同じファイルに書きました。
ですので、WordPressのサイドバーなどに追加すればすぐに動かすことができます。

室井
このブログもPC版のサイドバーに表示させているよ!
みゅう
表示されてませんけど…
室井
このページだとコードが干渉してサイドバーには表示されないんですよ。
他のページでは表示されているはずです!