リング型時計

JavaScriptで作った各桁のリングの数字が回転し続ける時計です。

動くサンプルはこちら。
おまけの巨大版はこちら。

使うには、HTML内の希望の場所に〜〜を埋め込めばよいと思います。下記のタグを埋め込み、スクリプトをダウンロードし、HTMLファイルと同一ディレクトリに配置してください。

<script src="rot_clock.js"></script>

一応Safari, Firefox, Opera, IE6で確認。なお、表示サイズを変更していたり、フォント(Century Gothic)がないと、表示が乱れてしまいます。orz うまく動かないとき、デザインをかえたい場合は適当にJavaScriptファイルを落として編集して下さい。汚いですけど(><)

原理としては、各桁に対応するリング(数字を縦に並べて書いてあるDIV要素)を float: left; で並べておき、時間にあわせて position: relative; top: ●px; として上下位置を調整しているという感じです。また、時刻を表す一部分のみが見えるよう、外枠のDIV要素に大きさを指定し、overflow: hidden; で不要なところを隠しています。
JavaScript部分については、あえてDate::getMinitesなどの関数を使わず、ループで時間(JavaScriptの時刻の内部表現はms単位)を10とか6で割り算してリングの位置を計算しています。