【JavaScript × HTML】2週間後の日曜日を表示する

「2週間後の日曜日や今月末まで期間限定」のように「現在から何日後」に日付を表示される方法です。手動で修正してサーバーに上げ直してもいいのですが、更新が手間だったり忘れてしまうケースことがないように自働的に表示される方法です。応用すれば「次の月の月末」や「今週末」なども可能です。

＼まで期間限定！／

HTML

<div class="sub-catch">＼<span></span>まで期間限定！／</div>

JavaScript

<script>
window.addEventListener("load", function(){
  let date= new Date () 
  date.setDate(date.getDate() + 14- date.getDay());   
  let month = date.getMonth() + 1 ;
  let day = date.getDate() ;	
  let dayOfWeek = date.getDay() 
  let dayOfWeekStr = [ "日", "月", "火", "水", "木", "金", "土" ][dayOfWeek]
  document.querySelector(".sub-catch span").innerHTML=month+"/"+day+"("+dayOfWeekStr+")"
});
</script>

CSS

<style>
.sub-catch {
    font-size: 23px;
    font-weight: 500;
    margin-bottom: 8px;
    text-align: center;
    padding: 30px 0 0 0;
}
.sub-catch span {
    color: #d60027;
}
</style>

ちょっと解説

「今日から何日後」は簡単に取得できると思いますが週末や特定の曜日を指定する場合は少しコツがあります。

date.setDate(date.getDate() - date.getDay());

「getday()」メソッドは、地方時に基づき、指定された日付の「曜日」を返します。 0 は日曜日を表します。(参照)今日が木曜日だった場合、「getday()」は4を返し、今日の日付から4を引くと日曜日になります。そのため、上記のコードは常に日曜の日付を取得するようになります。14をプラスすれば2週間後になりますし、8を足せば月曜日の日付になります。

いろいろおためしください。

Javascript

Posted by Next-k