Eyecatch jQuery

Javascript,jQuery

jQueryでクーポン系サイトにある、カウントダウンタイマーを設置してみる

2013/05/07

作成しているサイトにグルーポンやシェアリーなど、クーポン系サイトでよく利用されているカウントダウンタイマーが必要になったので、その設置方法の紹介です。
今回使用するのは jQuery Countdown です。

完成したコードは以下のようになります。

では解説。
1行目はHTMLのヘッダ部分に jquery.countdown をロード。
5行目で現在日時を取得し、変数に代入。
8行目で、カウントを0としたい日時を作成します。
『"<?= $buyEndTimeJqueryTimestamp ?>"』は、phpで変数化されている値をJavaScriptに持ってくる記述です。
この『$buyEndTimeJqueryTimestamp』は、PHPで作成したタイムスタンプ値で、マイクロ秒で指定する必要があるので、1000倍します。
10行目で計算
11行目で出力です。#TimeLeft 部分で指定しているタグへ表示されます。

htmlの記述はこんな感じで

-Javascript,jQuery
-, , , , , , , ,