res 黒様 | sikaku

response

message

parody01の日付をページアクセス日の相対値で表示したい

response

はじめまして、メールありがとうございます。　お返事遅くなりまして申し訳ありません。

下記編集でお試しいただければと思います。　上手く行かない場合は実働ページのURLかソースを提示の上再度ご連絡いただければ幸いです。

code edit

日付表示部分

HTML


        
	<li class="system">
	  <p data-date="5">5日後</p>
	</li>

5部分で何日分ずらすかを指定
5：5日後　-3：3日前
5日後部分はJavaScript非実行時の代替テキスト

JavaScript


        
	<script>
	document.addEventListener('DOMContentLoaded',()=>{
	
	let week = '日月日水木金土';
	let getDate = r =>{
		let d = new Date();
		d.setDate( d.getDate() + r );
		return {
			m: d.getMonth()+1,
			d: d.getDate(),
			w: week[d.getDay()]
		};
	};
	
	document.querySelectorAll('[data-date]').forEach($tgt=>{
		let date = getDate( parseInt( $tgt.getAttribute('data-date') ) );
		$tgt.textContent = `${date.m}月${date.d}日(${date.w})`;
	});
	
	});
	</script>

ページ内のどこかに一回記述(HEAD内推奨)

demo

3日前

180日後

今日

HTML


        
	<p data-date="5"></p>
	<p data-date="-3">3日前</p>
	<p data-date="180">180日後</p>
	<p data-date="0">今日</p>

：一行目の数値を変更