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

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

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

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

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

Advertisement

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

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

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

今回のカウントダウンタイマーのポイント

jQuery不要

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

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

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

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

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

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

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

 

ユーザーの環境に依存しており、ページを再読み込みしないと各表示に切り替わりませんので注意してください。

実装する

HTML

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

Javascript

開始日時を入力

43行目:var start = new Date('2018/10/3/ 0:00:00')にセールの開始日時を入力します。

終了日時を入力

45行目:var end = new Date('2018/10/4/ 23:59:59')にセールの開始日時を入力します。

テキストを編集

50行目:var text = '<span>終了</span><span>まで</span>'

54行目:var text = '<span>開始</span><span>まで</span>'

61行目:var timer = new CountdownTimer('cdt_date', tl, '終了しました。')

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

CSS

カウントダウンタイマーのデザイン例として、CSSサンプルを紹介します。

デモ

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

 

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

その他

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

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

◯日◯時間◯分◯秒の表示のカウントダウンタイマーに変更

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

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

ミリ秒を非表示

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

ミリ秒非表示カウントダウンタイマー

 

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

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

まとめ

今回のカウントダウンタイマーのおさらいポイントは、

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

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

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

それでは今回はこのへんで。

以上!

javascriptカテゴリの最新記事