【JavaScript】日時指定で表示・非表示を切り替える方法

2022.6.30

【JavaScript】日時指定で表示・非表示を切り替える方法

期間限定イベント、キャンペーン、お盆・お正月など、日時を指定してバナーを表示、または削除して欲しいという時ありますよね。

わざわざ、その時間にパソコンを開かなくても、JavaScriptで事前に設定することができます。

JavaScriptの記載方法

<script>
window.onload = function() {
  var now = new Date();
  var start = new Date('2022/6/30 0:00'); // 表示開始日時
  var end = new Date('2030/6/30 0:00'); // 表示終了日時

  if ( start <  now && now < end ) {
      document.getElementById("timer").style.display="block";
  }
}
</script>

HTMLの記載方法

<div id="timer" style="display: none;">
ここにバナーなど、期間限定の内容を記載する
</div>

実装結果

<br /> See the Pen <a href="https://codepen.io/Uchaaan/pen/oNqgbwb"><br /> 日時指定で表示・非表示を切り替える</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

いかがだったでしょうか。
バナー表示（または削除）を休日に指定こられても、これを使えば休日出勤することもなく、自宅でわざわざ指定の時間にパソコンを開くこともなくなります。（確認はするんですけどね。。。）
機会があれば活用してみてください。