javascript 日付によって表示を変更する方法

Question

問題点（質問内容）

JavaScriptなどを使ってHTMLファイルだけで日付によって表示される文字を変更する方法はありませんか。

理想の形式

形としては、
ある指定した開始日時を過ぎたら、その表示が出てきて、
開始日時の前や別に指定した終了日時の後は、表示できない旨を表示
といった形です。

実際の表示例

具体的な案です。以下の場合の書き方を掲載していただければと思います。
＜前提条件＞
表示開始日時：2020/7/24
表示終了日時：2020/8/9

＜2020/7/24より前（この日を含まない）の表示＞


非公開です。

＜2020/7/24～2020/8/9（両日を含む）期間中の表示＞


公開中！

＜2020/8/9より後（この日を含まない）の表示＞


非公開です。

こんな感じです。

実は、投稿前に以下のhtmlにしましたが成功しませんでした。

<span class="view_timer" data-start-date="2016/2/15 0:00" data-end-date="2016/2/16 0:00">表示</span>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
      <script>
$(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();
    }
  });
});
</script>

Comments

[Lhankor_Mhy]

javascriptを使う場合、ブラウザの表示上見えていないだけで、情報は事実上公開されることになりますが、それはかまいませんか？

[退会済みユーザー]

それでも構いませんが、可能ならば公開されない方がいいです。

Answer 1

質問者さんがJavaScriptと言っているので大丈夫だろうと思って書きました。

window.onload = function () {
  var today = new Date();
  var start = new Date(2020, 7, 24, 0, 0, 0, 0); //2020年7月24日0時0分0秒0
  var end = new Date(2020, 8, 9, 0, 0, 0, 0); //2020年8月9日0時0分0秒0
  if (start.getTime()<=today.getTime() && today.getTime()<=end.getTime()) {
    document.write('公開中');
  } else {
    document.write('非公開');
  }
}

CodePen

ifとelseの中にCSSで要素の表示非表示とか入れる手もあります

一応秒数指定まで書いときました

Comments

[kyoya0819]

ちなみに、 var today = new Date(); の()の中に 年, 月, 日 の書式で入力すると「今日」の日付を変えられます。
Codepenでお試しください。

[x_x]

onload にする意味は何でしょうか？

[kyoya0819]

深い意味はありません。
「ページを開いた時に表示するならonloadでいいのでは」くらいです。
あと強いていうなら「有名だから」っていうのもあります。
onload以外にこの場合適任なものがありましたら後学のためにお教えいただけるとありがたいです。
遅いのは承知していますがまずはわかりやすいコードで書きました

Answer 2

:root main {
  display: none;
}

:root.open main {
  display: block;
}

:root.open .note {
  display: none;
}

function checkDate() {
  var now = new Date();
  document.documentElement.classList.toggle('open', now >= new Date(2020, 7 - 1, 24) && now < new Date(2020, 8 - 1, 10));
  setTimeout(checkDate, 60000);
}

checkDate();

  <main>公開中！</main>
  <p class="note">非公開です。</p>

https://developer.mozilla.org/ja/docs/Web/API/Element/classList

Comments

[退会済みユーザー]

投稿していただいたあとですみませんが、時刻指定もできるといいのですが、可能ですか？

[x_x]

引数の数によりミリ秒まで指定可能です。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date