如何將一周中的每一天動態綁定到 HTML 中的每個 h1

Question

您好，您知道如何以第一個 h1 今天顯示的方式將一周中的每一天綁定到每個 h1，下一個 h1 顯示明天，第 7 個 h1 顯示從今天開始的第 7 天嗎？ 我這樣做是我最大的努力，我只能讓所有的人都表現得很好。謝謝

 function currentdaychange() { let weekday = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ] [new Date().getDay()]; console.log(weekday) let items = document.querySelectorAll('.currentday'); document.querySelector('.currentday').innerHTML = weekday; for (var i = 0; i < items.length; i++) { items[i].innerHTML = weekday; } requestAnimationFrame(currentdaychange); } currentdaychange();

 <h1 class=currentday></h1> <h1 class=currentday></h1> <h1 class=currentday></h1> <h1 class=currentday></h1> <h1 class=currentday></h1> <h1 class=currentday></h1> <h1 class=currentday></h1>

Answer 1

您可以使用Date.prototype.toLocaleDateString並傳入選項{ weekday: 'long' }來檢索本地化的星期幾。

 const formatDayOfWeek = date => date.toLocaleDateString('en-US', { weekday: 'long' }); const incrementDay = date => { date.setDate(date.getDate() + 1); return date; }; const currentDayChange = () => { const now = new Date(); [...document.querySelectorAll('.day-of-week')].forEach(day => { day.textContent = formatDayOfWeek(now); incrementDay(now); }); } currentDayChange();

 h1 { font-size: smaller; }

 <h1 class="day-of-week current-day"></h1> <h1 class="day-of-week"></h1> <h1 class="day-of-week"></h1> <h1 class="day-of-week"></h1> <h1 class="day-of-week"></h1> <h1 class="day-of-week"></h1> <h1 class="day-of-week"></h1>