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

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

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」と入力します。

テキストを編集

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

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

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

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

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>';を挿入

ミリ秒を非表示

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

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

 

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>を削除

まとめ

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

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

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

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

追記)Safari閲覧時の不具合を修正

コメント

タイトルとURLをコピーしました