一定期間、Newマークやバナーを表示・非表示

指定の月日が来たら非表示にする

新しく更新したページに「New!」を付けて、一定期間がすぎたら自動的に消えるようにする。

function newmark(mark,yy,mm,dd){
	expireDate = new Date(yy,mm - 1,dd);
	now = new Date();

	if(now.getTime() <= expireDate.getTime()){
	document.write(mark);
	}
}

マークを表示したい場所に下記スクリプトを記載します。

例）2014年1月31日まで表示する

テキストの場合：

<script type="text/javascript">newmark('<span class="newmark">NEW!</span>',2014,1,31);</script>

画像の場合：

<script type="text/javascript">newmark('<img alt="new" src="new.png" />',2014,1,31);</script>

開始日と終了日を指定して、一定期間バナーやテキストを表示する

bodyタグ内の表示したい場所に要素を追加します。

<div id="banner">バナー</div>

bodyの終了タグの直前にJavaScriptを追加します。

<script>
	// 表示させたい期間（開始日と終了日）を指定
	const startDate = new Date('2023-03-07T12:00:00');
	const endDate = new Date('2023-03-10T11:59:59');

	// バナーの表示非表示を切り替える関数
	function toggleBanner() {
		const banner = document.getElementById('banner');
		const currentDate = new Date();

		if (currentDate >= startDate && currentDate <= endDate) {
			banner.style.display = 'block';
		} else {
			banner.style.display = 'none';
		}
	}

	// ページが読み込まれたときと、1分ごとにバナーの表示を更新する
	toggleBanner();
	setInterval(toggleBanner, 60 * 1000);
</script>

startDate , endDateに表示させたい期間を指定します。

上記コードでは2023/3/7 12:00から2023/3/10 11:59:59まで表示する指定をしています。

setInterval関数でページが読み込まれてた時と、1分毎にtoggleBanner関数を呼び出して更新します。

setInterval()は指定した時間毎に関数を実行します。バナー表示の期間が限定されている時に有効です。常時表示する場合は必要ありません。

また短い間隔で関数を実行するとパフォーマンスに影響を与えるので注意が必要です。

開始日と終了日をHTMLで指定する

開始と終了をJavaScriptでなくHTMLで指定する場合はdata属性を使うとメンテナンスしやすいかもしれません。

<div id="banner" data-start-date="2023-03-07 12:00:00" data-end-date="2023-03-10 11:59:59">バナーが表示されます</div>

// バナーの表示非表示を切り替える関数
function toggleBanner() {
    const banner = document.getElementById('banner');
    const startDate = new Date(banner.dataset.startDate);
    const endDate = new Date(banner.dataset.endDate);
    const currentDate = new Date();

    if (currentDate >= startDate && currentDate <= endDate) {
        banner.style.display = 'block';
    } else {
        banner.style.display = 'none';
    }
}

// ページが読み込まれたときと、1分ごとにバナーの表示を更新する
toggleBanner();
setInterval(toggleBanner, 60 * 1000);