毎月同じ日に表示／非表示を切替えるJavaScript

セールなどのイベント日だけ表示させたい画像やバナーはありませんか？

JavaScriptを使えば毎月同じ日だけバナーを表示することができます。

楽天市場の「5と0のつく日」や「毎月1日のワンダフルデー」、Yahoo!ショッピングの「5のつく日」など、毎月決まった日に開催するイベントとの相性抜群です！

特徴

本記事で実装するJavaScriptの特徴はこちら。

一度設定すれば毎月決まった日に自動で動作します。

また、手動で行うとどうしても忘れてしまうことがあります。その点JavaScriptを使うと忘れることがないため手動よりも確実です。

サンプル

サンプルとして下の2種類を用意しました。

毎月1日

See the Pen First display.（毎月1日に要素を表示するJavaScript） by ざきひー (@zakihiii) on CodePen.0

毎月1日になると画像を表示します。

本記事をご覧になっている日が1日でない場合はサンプルのJS欄にある(1 == day)を記事閲覧当日の数字に書き換えてRerunをクリックしてください。画像が表示されます。

例）記事閲覧当日が12日なら(12 == day)

5と0のつく日

See the Pen 5と0のつく日に要素を表示するJavaScript by ざきひー (@zakihiii) on CodePen.0

5と0のつく日（5日、 10日、15日、20日、25日、30日） に画像を表示します。

こちらのサンプルも上と同様、記事閲覧日の数字に置き換えてRerunをクリックすると画像が表示されます。

5と0のつく日に表示するJSを実装する

上で紹介したサンプルの中から「5と0のつく日」の実装方法を紹介します。

主に使用するのはJavaScriptです。

JavaScript

document.getElementsByClassName('xxxxxx')のxxxxxxには任意にclass名をつけます。

また、if (5 == day || 10 == day || 15 == day || 20 == day || 25 == day || 30 == day)には表示させたい日の数字を記述します。

ちなみに || は or（または）との意味があります。

つまり、上のJSは「もし今日が5日、10日、15日、20日、25日、30日のいずれかならばfivezerodayというclass名がついた要素を表示、それ以外の日には非表示にする」という意味です。

HTML

JSで考えたclass名を5と0のつく日に表示させたい要素に記述します。

classさえ付ければ複数の要素を対象にすることも可能です。

さあ、毎月同じ日にバナーを表示しよう！

僕は主にECサイトのセールバナーを表示するために使用していますが、ブログやコーポレートサイトのキャンペーンでも活用できます。

一度設定すれば毎月自動で動作してくれるので手動で行うより確実です。

ここぞという時のためにバナーや文章を仕込んで表示させましょう。