Javascriptでセールに最適なカウントダウンタイマーを設置する

javascriptを使ったカウントダウンタイマーを紹介します。

楽天のスーパーセールや自店舗のセール、キャンペーン時に設置すると賑わい感がでます。

セールが開始するまで、終了するまでの表示を通しで設定するので手動で切り替えたくない、ずぼらな方におすすめです。

カウントダウンタイマーとは

セール等が開始するまで、または終了するまでの時間を刻み、その期日を知らせる役割があります。

また、ネットショップにおいてはセール、キャンペーンの賑わい感を演出するための重要なツールでもあります。

本記事のカウントダウンタイマーのポイント

jQuery不要

jQueryを使わないで実装できます。

jQueryは便利なんですが、最近では脱jQueryの流れもありますし、ページの表示速度にも影響するので使わないに越したことはないですよね。

「開始まで」と「終了まで」を通しでカウントダウンする

セールなどが開始するまで、終了するまでのカウントダウンを通しで表示できます。

開始までのカウントダウンタイマー

終了までのカウントダウンタイマー

終了後のカウントダウンタイマー

カウントダウンタイマーを実装する

HTML

<div class="cdt_wrapper">はデザイン上のもので、カウントダウンタイマーの動作に必要なのは<div class="cdt">の中身です。

Javascript

開始日時を入力

41行目：var start = new Date('2019-04-03T00:00+09:00')にセールの開始日時を入力します。

「2019年4月3日0時0分」の場合は「2019-04-03T00:00+09:00」と入力します。

終了日時を入力

43行目：var end = new Date('2019-04-19T23:59+09:00')にセールの開始日時を入力します。

「2019年4月19日23時59分」の場合は「2019-04-19T23:59+09:00」と入力します。

テキストを編集

セールが「開始するまで」「終了するまで」「終了した後」のテキストを変更することで、それぞれのセール、キャンペーンに合った内容にします。

CSS

デザイン例としてCSSのサンプルを1つ紹介します。

デモ

実際に動作しているカウントダウンタイマーを確認するため、デモを用意しました。

See the Pen セールに最適なカウントダウンタイマー by ざきひー (@zakihiii) on CodePen.0

カスタマイズ

◯日と◯時間◯分◯秒の表示に変更

◯日単位で表示したい場合の変更方法を紹介します。

javascriptを下のように編集します。

1. 15行目のvar hour = Math.floor((day * 24) + ((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));をvar hour = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));に書き換え
   ※「(day * 24) + 」を削除します。
2. 21行目と22行目の間にif (day) timer += '<span class="cdt_num">' + day + '</span><small>日と</small>';を挿入

デモをご覧ください。

See the Pen
Untitled by ざきひー (@zakihiii)
on CodePen.0

ミリ秒を非表示

ページの雰囲気によってはミリ秒まで表示するとうるさいということがあると思います。そんな時はミリ秒を非表示にしましょう。

javascriptを以下のように編集します。

1. 18行目のvar milli = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 10) % 100;を削除
2. 23行目の<span class="cdt_num">' + this.addZero(milli) + '</span>を削除

カウントダウンタイマーを2個以上設置する

２つ、３つ…と複数のカウントダウンタイマーを設置することも可能です。前述したコードに追記するだけで実装できます。

HTML

<spanタグ>に1つ目のタイマーとは異なるidをそれぞれつけます。例）cdt_txt2、cdt_date2

JavaScript

2つ目のタイマーを設置したい場合はfunction CDT() {}に続けてfunction CDT2() {}を記述します。

中身を書き換える部分はこちら。

1. timer = new CountdownTimer('cdt_date2'のcdt_date2
2. target = document.getElementById("cdt_txt2")のcdt_txt2

htmlで決めたidの値を各部に挿入します。

最後、window.onload = function () {}の中にCDT2();を追記すれば完成です。

デモ

See the Pen Best countdown timer for SALE for multiple（セールに最適なカウントダウンタイマー 複数用） by ざきひー (@zakihiii) on CodePen.dark

まとめ

セールに最適なカウントダウンタイマーのおさらいポイント。

カウントダウンタイマーにはお客さんに期日を知らせる役目と、賑やか感を演出する効果があります。

セールやキャンペーンなどで効果的に使用して売上アップに繋げましょう！

追記）Safari閲覧時の不具合を修正
追記）カウントダウンタイマーを複数設置する方法を追記
追記）◯日と◯時間◯分◯秒のデモを追記