コンテンツの公開期限を設定する

  • data-start-date 〜 data-end-dateの期間だけ表示されるようになります。
  • その時刻にちょうどページを閲覧中だった場合はリロードされるまで非表示/表示のままです。
  • 外側のボックスに設定すれば期間限定コンテンツ自体の表示時間制限にも使えますが、ソースを見れば内容はバレバレなので機密事項などには使わないこと。 "NEW"の表示程度がちょうどいいかも。
追加コンテンツ

※上記の例だと2024年1月20日 AM10時 〜 2024年6月21日 PM4時まで【NEW】という画像が表示されます。

追加コンテンツ NEW

※画像ではなくテキストでもOK。


<div class="borderbox-gray">
		追加コンテンツ
		<span class="view_timer" data-start-date="2024/1/20 10:00" data-end-date="2024/2/29 16:00">
			<img src="/Path/to/new.png">
		</span>
	</div>


	$(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();
			}
		});
	});

TOP