【JS】クーポン系サイトによくある「カウントダウンタイマー」をjQueryを使って設置してみる
2018/01/17
作成しているサイトに「グルーポン」や「シェアリー」など、クーポン系サイトでよく利用されているカウントダウンタイマーが必要になったので、その設置方法の紹介です。
カウントダウンタイマーを設置する
今回使用するのはライブラリ「jQuery Countdown」です。
jQuery Countdown
http://keith-wood.name/countdown.html
http://keith-wood.name/countdown.html
各種コード
JS
いきなりですが、完成したコードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript" src="/js/jquery-countdown/jquery.countdown.js"></script> <script type="text/javascript"> $(function () { // 現在日時を取得 var liftoffTime = new Date(); // 目標となる日時を設定 var targetSec = "<?= $buyEndTimeJqueryTimestamp ?>" * 1000; liftoffTime.setTime(targetSec); $('#TimeLeft').countdown({ until: liftoffTime, compact: true, format: 'HMS', description: ''}); }); </script> |
では軽く解説。
1行目：
HTMLのヘッダ部分に jquery.countdown をロード。
5行目：
現在日時を取得し、変数に代入。
8行目：
カウントを0としたい日時を作成します。
『"<?= $buyEndTimeJqueryTimestamp ?>"』は、phpで変数化されている値をJavaScriptに持ってくる記述です。
この『$buyEndTimeJqueryTimestamp』は、PHPで作成したタイムスタンプ値で、マイクロ秒で指定する必要があるので、1,000倍します。
10行目：
計算。
11行目：
出力です。
#TimeLeft 部分で指定しているタグへ表示されます。
HTML
htmlの記述はこんな感じで行います。
|
1 |
<span id="TimeLeft">[ここにカウントダウンタイマーが表示される]</span> |
意外と簡単に出来るものですね。
[tgAmazonItemLookup asin="B008B4893M" related="1"]