【JS】クーポン系サイトによくある「カウントダウンタイマー」をjQueryを使って設置してみる

2012/05/18 2018/01/17

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

カウントダウンタイマーを設置する

今回使用するのはライブラリ「jQuery Countdown」です。

各種コード

JS

いきなりですが、完成したコードは以下のようになります。

<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>

$(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の記述はこんな感じで行います。

<span id="TimeLeft">[ここにカウントダウンタイマーが表示される]</span>

1	<span id="TimeLeft">[ここにカウントダウンタイマーが表示される]</span>

意外と簡単に出来るものですね。

[tgAmazonItemLookup asin="B008B4893M" related="1"]

-Javascript,jQuery
-javascript, jquery, jquery.countdown, js, カウントダウン

: jQueryを使わないライブラリ「busy.js」を使って簡単にローディング画面を作ってみる。

仕事で作ったとあるサイトが、APIを叩いて結果を取得・表示するのですが、APIの反応が悪く、やったらと時間が掛かるので、ローディング画像を出し、ちょっとでも訪問者を待たせる努力をしてみようということで探しました所、「busy.js」というライブラリを発見。