HTMLとCSSとJavaScriptでレスポンシブなアナログ時計を作る

ハッピーコンピューター R&D担当の白川です。

ウェブサイトにパーツとしてアナログ時計を配置したいときってよくありますよね。えっないですか？そうですか、ないですか・・・

「いや私はあるよ！」という方向けに、今回私がとある案件の中で作成したアナログ時計をこちらで公開いたします。

とにかくすぐに使ってみたい方はこちら

特徴

完全自己完結型（外部依存なし、画像ファイルも不要）
すべてベクターデータなので拡大してもギザギザしない
HTML/CSS/JavaScriptのコードが簡潔で見やすい（個人の感想です）
再利用・改変自由

秒針ありバージョン

秒針なしバージョン

コードの簡単な説明

JavaScript部分

tick関数で毎秒（毎分）針を進める処理を行っています。

針の傾きを表現する部分はCSSが担っていますが（例: transform: rotate(90deg);で90度傾ける）、そのCSSをJavaScriptによって上書き処理することで針を進めています。

JavaScriptのnew Date()はクライアント側（Webページを見ている人）基準の日時となりますが、今回の案件ではどの国の人がアクセスしても日本時間で表示させたかったため、new Date(Date.now() + ((new Date().getTimezoneOffset() + (9 * 60)) * 60 * 1000));としてUTC+9時間で固定しました。

CSS部分

アナログ時計の表現のほとんどはCSSで行われています。

時計の文字盤は<div id="clock">すなわち#clockのbackgroundでSVGデータとして表現しています。これにより別途画像ファイルをどこかに配置する必要がなくなります。SVGデータの作成にはSketchというデザインソフトを用いました。

時計の針は初期位置で12時方向を向いており、針の下部（transform-origin: bottom;）が時計の中心となるようパーセントで針の大きさや位置を調整しています。この調整により、JavaScriptでtransform = rotate(${minuteDeg}deg);を上書きしたときに針がいい感じに中心を軸に動いてくれます。

JavaScriptとかCSSとかよく分からないけど使ってみたい

CDNのjsDelivrからclock.min.jsを読み込んで使えるようにしているので、下記のようにHTMLを書くだけで、

<div style="width: 20%; margin: auto;">
  <div id="clock" offset="+09:00" second="true"></div>
</div>
<script src="https://cdn.jsdelivr.net/gh/iwnsew/analogclock@1/clock.min.js"></script>