カウントダウン終了後に任意のコードを実行できる軽量jQueryプラグイン・jquery-countdown

カウントダウンタイマーの実装と
終了後に任意のイベントを発生
させられるjQueryのプラグイン、
jquery-countdownのご紹介です。
たまに見かけるやつですね。使用
頻度は高くは無さそうですけど。

ローンチ前のComing soonページなんかでたまに見かけるやつです。スクリプトも軽量です。

jquery-countdown

カウントダウンアニメーションを実装します。終了後にコードを実行させる事も出来ます。時計部分はCSSスプライトを利用した画像を使用しているようです。

動作サンプル

サンプルです。再生ボタンで動作テスト出来ます。

日をまたぐようなカウントダウンならもう一工夫必要ですね。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

本体とプラグインを読み込みます。

$('#foo').countdown({
    image: 'img/digits.png',//時計の画像
    startTime: '00:10',//スタート時間。02:05:24:15なら2日と5時間24分15秒
    timerEnd: function(){ alert('bar!'); },//終了後に実行したいコード
    format: 'mm:ss'//時間のフォーマット
});

で、セッティング。コールバック処理はtimerEndオプションを使います。

用途はアイデア次第ですね。結構昔のプラグインみたいですが、初見だったのでメモ的に記事にしました。ライセンスはApache License 2.0だそうです。

jquery-countdown(via:webappers)