jQuery Countdownで詳細なオプションを設定したい

高性能なカウントダウンライブラリ「jQuery Countdown」。

(http://keith-wood.name/countdown.html)

「僕は秒まで表示させたい」

「いや私は日付けだけの表示でいい」

「cssで細かくスタイル付けしたいのでhtmlタグを挿入したい・・・」

「カウントダウン完了後にこういうメッセージ入れたいんだけど...」

・・・などなど、これらのわがままな要求もオプションで簡単に設定可能である。

下記の例をみていただいた方が早いだろう。

この例では、カウントダウン終了時刻をDOM要素から取得(getElementById)し、

カウントダウン終了日時(liftoffTime)までのカウントとダウンを

「日　時間 分　秒」の形式で出力させている。

getElementByIdで要素を取得する場合全てString(文字列)型で取得されるのかと思っておりましたが、JavaScriptは型付けのあいまいな言語なので、取得した文字列が数字のみで構成される場合、自動的にint型として扱ってくれるようです。

<p>この商品は

<span id="rmn_month">12</span>月

<span id="rmn_day">29</span>日(木)

<span id="rmn_hour">22</span>:<span id="rmn_min">00</span>

で終了します。</p>

<div id="odr_count"></div>

$(function() {

//現在日時を取得

var t = new Date();

var y = t.getFullYear();

//DOMからカウントダウン終了日時を取得

var myM = $("#rmn_month").html();

var myD = $("#rmn_day").html();

var myH = $("#rmn_hour").html();

var myMin = $("#rmn_min").html();

//カウントダウン終了日時を変数に格納

var liftoffTime = new Date(y, myM-1 , myD, myH ,myMin );

//.countdownの設定

$('#odr_count').countdown({

//カウントダウン終了日を指定

until: liftoffTime,

//カウントダウンの表示形式(d:日 H:時間 M:分 S:秒。

下記はdHMSと指定しているので、「日」「時間」「分」「秒」まで表示される)

format: 'dHMS',

//カウントダウンの表示レイアウトを指定

layout: ' あと

{d<}<span class="limit">{dn}</span>日{d>}

{h<}<span class="limit">{hn}</span>時間 {h>}

<span class="limit">{mn}</span>分

<span class="limit">{sn}</span>秒',

//カウントダウン終了後に表示させるテキストを指定

expiryText: '販売期間終了しました'

});

});