カウントダウンタイマーの実装と
終了後に任意のイベントを発生
させられる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だそうです。