オンラインショップで時々見かける、『あと ◯ 日で終了します』という表示。

下の画像のように表示するには、どうすればよいのでしょうか?

image2

今回は、カウントダウンを表示する方法を紹介します。

まずは、HTML で土台を作ってみましょう。

<div>
  <h2>セールは<span class="end-date">5月5日(水)</span>に終了します。</h2>
  <h1>セール<span class="countdown-time">終了まであと2日です</span>。</h1>
</div>

image2

『5 月 5 日(木)』と『終了まであと 2 日です』は、JavaScript で変化させたいので、span タグで囲んで、クラス名を付けます。

下の画像のように表示されます。

次に、JavaScript を記述していきます。

上の『5 月 6 日(木)』からやっていきます。

まず、どの場所を変えていきたいか指定するために、document.querySelector()でクラスを指定します。

『5 月 6 日(木)』を変えていきたいので、end-dateのクラスを指定しましょう。

const endDate = document.querySelector(".end-date");

日にちは、new Date()関数を使用します。

const settingDate = new Date();

setttingDateconsole.log()で調べると、以下になります。

const settingDate = new Date();
console.log(settingDate);

image2

今現在の時刻が表示されました。

時刻を指定するには、Date()のカッコの中に設定していきます。

カッコの中は、(年, 月, 日, 時, 分, 秒)の順に指定します。

例えば、2021 年 5 月 6 日と設定してみましょう。

カッコの中に、Date(2021, 5, 6)と記述して、console.log()で確認します。

const settingDate = new Date(2021, 5, 6);
console.log(settingDate)

image2

5 月を設定したのに、Jun(6 月)になりました。

Date()関数は、1 月は 0 から始まるのです。

今回、月を 5 と記述したので、0 から始まって 6 番目、つまり 6 月となりました。

5 月にしたい場合は、月を『4』にしなければなりません。

const settingDate = new Date(2021, 4, 6);
console.log(settingDate)

image2

5 月になりました。

月に関しては、間違えやすいポイントなので、気をつけてください。

5 月 6 日が指定できましたので、次は 5 月の『5』を取り出します。

月を指定するのは、getMonth()関数を使用します。

settingDateの月を指定しましょう。

const month = settingDate.getMonth();

console.log(month);で確認すると、

image2

4 が表示されました。

こちらは、Date()関数で指定した月の数字がそのまま表示されました。

monthに 1 を足して、5 にします。

const month = settingDate.getMonth() + 1;

console.log(month);で確認すると、

image2

5 になりました。

日付を取り出しましょう。

日付を指定するのは、getDate()関数を使用します。

注意:getDay()関数ではありません。

settingDateの日付を指定しましょう。

const date = settingDate.getDate();

console.log(date);で確認すると、

image2

6 が表示されました。

そして、曜日を指定します。

曜日は、getDay()関数を使います。

const weekday = settingDate.getDay();

console.log(weekday);で確認すると、

image2

4 が出ました。

Date()関数では、0 から順に『日曜日』『月曜日』『火曜日』『水曜日』『木曜日』『金曜日』『土曜日』となっています。

4 ということは、0 から始まって 5 番目、つまり『木曜日』にあたります。

4 を『木』にしたいので、曜日の配列を作ります。

const weekdays = ["日", "月", "火", "水", "木", "金", "土"];

配列の 5 番目の木曜日を指定したいので、weekday = weekdays[4];にするとうまくいきます。

4 は、先程console.log(weekday);で出力した weekday とピッタリあてはまるので、以下のコードにしてみましょう。

const weekday = weekdays[settingDate.getDay()];

console.log(weekday);で確認すると、

image2

『木』になりました。

これらを繋げて、テキストの内容を変えていきます。

テキストを変えるのは、textContentを使用します。

変えたい場所は、先程作成した、endDate内を変更したいので、endDate.textContextと記述します。

変数と文字列を混在して表示するには、バックスラッシュ(``)を使用します。

コードは、以下の通りになります。

endDate.textContent = `${month}月${date}日(${weekday})`;

画面を確認すると、

image2

『5 月 6 日(木)』に変わりました。

続いて、下の文字を変更します。

下の文字は、1 日前までは『セール終了まであと ◯ 日です。』、セール当日は『セールは本日までです。』、セール終了翌日は『セールは終了しました。』と表示する様にします。

今のままでは 5 月 6 日に日付が変更された時点でセール終了になります。

5 月 7 日直前までセールができるように、セット終了の時間を『2021 年 5 月 6 日 23 時 59 分 59 秒』に設定します。

settingDatenew Date内をDate(2021, 4, 6, 23, 59, 59)に修正しましょう。

const settingDate = new Date(2021, 4, 6, 23, 59, 59);

カウントダウンを計算しやすいように、settingDate を数値化します。

数値化するときは、getTime()関数を使用します。

const settingTime = settingDate.getTime();

console.log(settingTime);で確認すると、

image2

日付が数値になりました。

今現在の時間も同様に、getTime()関数で数値化します。

const today = new Date().getTime();

image2

todayからsettingTimeを引いた数が、セール終了までの数値になります。

const time = settingTime - today;

ここで、1 日を数値で表してみましょう。

この数値は、ms という単位になっています。

1 秒は 1000ms になります。

1 分は 60 秒で、1 時間は 60 分、1 日は 24 時間です。

よって、1 日は、24×60×60×1000 になりますので、以下のコードで記述できます。

const oneDay = 24 * 60 * 60 * 1000;

あと ◯ 日は、セールまでの数値(time)を 1 日の数値(oneDay)で割ります。

const days = time / oneDay;

image2

整数にするには、Math.floor()を使用します。

const days = Math.floor(time / oneDay);

console.log(days);で確認すると、

image2

3 日の『3』が表示されました。

『5 月 6 日(木)』と同様に、テキストの内容を変更したいので、

countdownTime.textContent = `終了まであと${days}日です`;

とします。

image2

表示されました。

『5 月 15 日』にすると、

image2

変わりました。

例えば、今日の日付『5 月 3 日』前の『5 月 2 日』にすると、

image2

と表示されるので、こちらを修正します。

それには、if 文で指定しましょう。

  • day > 0 の場合は『セール終了まであと ◯ 日です。』
  • day === 0 かつ time を oneDay で割った余りが 0 より大きい場合は『は本日までです。』
  • 上 2 つ以外は『セールは終了しました。』

の条件にします。

コードは、以下の通りです。

if (days > 0) {
  countdownTime.textContent = `終了まであと${days}日です`;
} else if (days === 0 && time % oneDay > 0) {
  countdownTime.textContent = "は本日までです";
} else {
  countdownTime.textContent = "は終了しました";
}

5 月 2 日は、

image2

5 月 3 日は、

image2

無事、表示が変わりました。

コードの全文は、以下の通りです。

// 曜日一覧
const weekdays = ["日", "月", "火", "水", "木", "金", "土"];

// セール終了日を設定
const countdownTime = document.querySelector(".countdown-time");

const settingDate = new Date(2021, 4, 6, 23, 59, 59);

const month = settingDate.getMonth() + 1;
const date = settingDate.getDate();
const weekday = weekdays[settingDate.getDay()];

endDate.textContent = `${month}月${date}日(${weekday})`;

// セール終了までの時間
const endDate = document.querySelector(".end-date");

const settingTime = settingDate.getTime();
const today = new Date().getTime();
const time = settingTime - today;

const oneDay = 24 * 60 * 60 * 1000;
const oneHour = 60 * 60 * 1000;
const oneMinute = 60 * 1000;

const days = Math.floor(time / oneDay);

if (days > 0) {
  countdownTime.textContent = `終了まであと${days}日です`;
} else if (days === 0 && time % oneDay > 0) {
  countdownTime.textContent = "は本日までです";
} else {
  countdownTime.textContent = "は終了しました";
}

セール品の売上を上げたい場合、ぜひ使ってみてください。

ブログ一覧