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: '販売期間終了しました' }); });