FlipClockは、パネルがパタパタ回るように時を刻みます。時計だけでなく、カウントダウンの機能も持っています。この FlipClockの日本語対応とサーバー時間による時計を実現してみます。サーバーの時間を取得してセットする機能があると思っていたのですが、試したバージョンではうまく設定できないようなのでちょっとカスタマイズしてみます。

<link rel="stylesheet"          type="text/css" href="css/flipclock.css" media="screen" />
<script type="text/javascript"  src="js/jquery.js"></script>
<script type="text/javascript"  src="js/flipclock.js"></script>
<script type="text/javascript"  src="js/flipclock_jp.js"></script>

serverTime という IDセレクタにセットしてあるサーバー時間を取得して時を刻む FlipClock.TwentyFourHourServerClockFace を実装します。また、日本語表示するための FlipClock.Lang.Japanese を実装します。これらは flipclock_jp.js というファイルに保存して利用します。

<script type="text/javascript">
var clock;
$(function() {
    clock = $(".clock").FlipClock({
	    clockFace: "TwentyFourHourServerClock",
	    language: "japanese"
    });
});
</script>

flipclock_jp.js に実装した関数を利用するように FlipClockのオプションを設定します。

<div class="cloclArea">
<div class="flip-counter clock"></div>
</div>
<div id="serverTime"><?php echo date("m/d/Y H:i:s"); ?></div>

パタパタ時計を表示する領域（.flip-counter）を確保し、サーバーの時間を設定した領域（#serverTime）を hiddenで確保します。