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

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

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

更新コンテンツ NEW

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


<div class="borderbox-gray">
		更新コンテンツ
		<span class="view_timer" data-start-date="2024/6/21 10:00" data-end-date="2025/6/21 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