javascript 两个数组之间的关系

4zcjmb1e  于 2023-04-19  发布在  Java
关注(0)|答案(3)|浏览(105)

我正在做一个简单的天气应用程序。它显示今天和未来4天的天气。
我有两个数组:第一个是WEEK_DAYS,第二个是一个dom元素数组,用于显示当天的名称。
我想要那个最上面的dom元素总是显示今天的天气。第二个必须显示明天等等。
________应用程序今天应显示
-SATURDAY〈第一个dom元素

  • 星期天
  • 星期一
  • 星期五
    -TUESDAY〈last dom元素
    ________应用程序明天应显示
    -SUNDAY〈第一个dom元素
  • 星期一
  • 星期五
  • 星期二
    -WEDNESDAY〈last dom元素
const WEEK_DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const daysElements = document.querySelectorAll("span.font-light");  // dom elements
const date = new Date();
const today = WEEK_DAYS[date.getDay()];  // date.getDay() returns a number: 0 for sunday, 1 for monday ... 6 for Saturday

我需要一些想法来实现这一目标。

[...daysElements].map((d, index) => {
  d.innerText = WEEK_DAYS.find((e) => e === today);  // of course all dom elements printing "Saturday" (today)
})
jckbn6z7

jckbn6z71#

你就快完成了。在计算中使用数字,在显示中使用字符串:

const WEEK_DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const daysElements = document.querySelectorAll("span.font-light");  // dom elements
const date = new Date();
const today = date.getDay();  // date.getDay() returns a number: 0 for sunday, 1 for monday ... 6 for Saturday

daysElements.forEach((d, index) => d.innerText = WEEK_DAYS[(today + index) % 7]);
span.font-light {display:block}
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>

这里也可以使用forEach

v64noz0r

v64noz0r2#

你需要使用document.createElement()创建你想要显示的DOM节点。在这个例子中,我使用了一个简单的无序列表。获取父元素(例如使用querySelector())并使用replaceChildren()将子元素附加到它,然后显示节点。

const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const temperaturesInDegreeCelcius = [21, 23, 19, 10, 18, 25, 24];

const list = document.querySelector(".list");
const listItems = weekdays.map((day, i) => createListItem(day, temperaturesInDegreeCelcius[i]));
list.replaceChildren(...listItems);

function createListItem(day, temperature){
  const li = document.createElement("li");
  li.innerText = `${day}: ${temperature} °C`;
  return li;
}
<ul class="list">
</ul>
sg3maiej

sg3maiej3#

很好的答案。我想我会把我的作为一个类似C的for循环的例子。

let daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const date = new Date();
d = date.getDay();
l = daysOfWeek.length;
const daysElements = document.querySelectorAll("span.font-light");

for (let i = 0; i < 5; i++) {
  daysElements[i].innerText = daysOfWeek[d % l];
  d++;
}
span.font-light {display:block}
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>
<span class="font-light"></span>

相关问题