我试图在一个设定的时间框架内循环使用tide Hight的api数据,并找到一个月中每一天的所有数据


for (let i = 1; i < data.values.length; i++) {
TimeStart = data.values[i].time;
HightStart = data.values[i].value;
TimeEnd = data.values[i].time;
HightEnd = data.values[i].value;
if (TimeStart.slice(11, 16) == start) {
Date = TimeStart.slice(0, 10);
TimeStart = TimeStart.slice(11, 16);
tidedata1.innerHTML = `${TimeStart} - ${HightStart}m`;
tidedata1Full.innerHTML = `${TimeStart}am - ${HightStart}m`;
}
if (TimeEnd.slice(11, 16) == end) {
Date = TimeEnd.slice(0, 10);
TimeEnd = TimeEnd.slice(11, 16);
tidedata2.innerHTML = `${TimeEnd} - ${HightEnd}m`;
tidedata2Full.innerHTML = `${TimeEnd}pm - ${HightEnd}m`;
}
}

if (i < day) {
square.classList.add("disabled");
}
square2.append(tidedata1Full, tidedata2Full);
square.append(monthNum, tidedata1, tidedata2, square2);
inner_grid.append(square);
}
});
calendar.append(month, inner_grid);

目前,它将获得正确的数据,但只持续一天,然后在所有日子里重复相同的数据。

数据结构看起来像

使用for each循环遍历数组中的每个数据点。然后将数据附加到需要的位置。在这种情况下,指向日历及其div。

lowHigh.forEach(d =>{
let wDate = new Date(d.time).getUTCDate();
let wHour = 6;
let eHour = 18;
wHour = ("0" + wHour).slice(-2);
let wMintue = new Date(d.time).getUTCMinutes();
wMintue = ("0" + wHour).slice(-2);
if(wDate == i+1)
{
if(tidedata1.innerHTML == "")
{

tidedata1.innerHTML = `${wHour}:${wMintue} - ${d.value}m`
tidedata1Full.innerHTML = `${wHour}:${wMintue}am - ${d.value}m`
}
else
{
tidedata2.innerHTML = `${eHour}:${wMintue} - ${d.value}m`
tidedata2Full.innerHTML = `${eHour}:${wMintue}pm - ${d.value}m`
}
}
})
if(i < day)
{
square.classList.add("disabled");
}
square2.append(tidedata1Full, tidedata2Full)
square.append(monthNum,tidedata1,tidedata2, square2);
inner_grid.append(square);
}
})

相关内容

最新更新