コンテンツの表示・非表示をjQueryを使ってタイマー設定する方法

rei

2020年8月31日 18:43

こんにちは！

今回は最近勉強した事を記録しておきたいと思います！

調べてもちゃんとした内容が書いてなかったりしたので、難しいことはわからないですが、誰かのお役に立てると嬉しいです。

多分簡単にできると思います！

jQueryとは

jQueryは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリらしいです。

1.HTMLの<head>と</head>の間の最下部に、以下のコードを記述する。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

上記のコードは変わる可能性があるみたい？

このコードを入れることによって、HTMLの中にjQueryを読み込むようです。

2.HTMLでタイマー設定したい部分にコードを追加

①8月15日まで表示

<span class=""view_timer"" data-end-date=""2020/8/15 0:00"">
ここに対象コードを入れる
</span>

②8月15日から表示

<span class=""view_timer"" data-start-date=""2020/8/15 0:00"">
ここに対象コードを入れる
</span>

③8月15日から8月16日まで表示

<span class=""view_timer"" data-start-date=""2020/8/15 0:00"" data-end-date=""2020/8/16 0:00"">
ここに対象コードを入れる
</span>

3.HTMLの</div>と</body>の間の最下部に、以下のコードを記述する。

<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>