特定の時間で表示を変更する時限式javascript

今年のエイプリルフールは休日です。
休みの日に出社しなくてもいいように、特定の時間が来たら表示して、終わったら消す。

そんなソースコードを紹介します。

時限式で実装できるのでとてもおすすめです。

<section class="view_timer" data-end-date="2018/3/31 23:59">
<div class="after">エイプリルフール前です</div>
</section>
<!-- エイプリルフール　前までの表示 -->

<section class="view_timer" data-start-date="2018/4/1 00:00" data-end-date="2018/4/1 23:59">
<div class="event">エイプリルフール当日です</div>
</section>
<!-- エイプリルフール 当日 -->


<section class="view_timer" data-start-date="2018/4/2 00:00">
<div class="after">エイプリルフール終わりましたです</div>
</section>
<!-- エイプリルフール終わった後の表示 -->

$(document).ready(function() {
  $(".view_timer").each(function(index, target) {
    var startDate = $(this).attr("data-start-date");
    var endDate = $(this).attr("data-end-date");
    var nowDate = new Date();

    if (startDate) {
      startDate = new Date(startDate);
    }
    else {
      startDate = nowDate;
    }
    if (endDate) {
      endDate = new Date(endDate);
    }

    if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
      $(this).show();
    }
    else {
      $(this).hide();
    }
  });
});

エイプリルフールは休みましょうね。

ほなね