我有一个循环，为未来7天的每一天创建一个元素，并显示特定日期的天气数据。 （从API获取数据）。 我不知道如何在每个循环中插入当天的日期。 日期应位于span元素中，id为“daily-weather”
我试图实现的日期格式是:“sun”“jan 31”
dataWeakly.daily.forEach((day, index) => {
const uvIndex: string = Math.floor(+day.uvi).toString();
if (index < 1) {
return;
}
const markup = `
<div class="weather-daily">
<span id="daily-date"></span>
<span id="daily-date"></span>
<img id="daily-img" src=http://openweathermap.org/img/wn/${
day.weather[0].icon
}@2x.png alt="weather img"></img>
<span>${toTitleCase(day.weather[0].description)}</span>
<span id="max-weather">${formatNumber(
day.temp.max
)}°c\u00A0\u00A0</span><span id="min-weather">\u00A0${formatNumber(
day.temp.min
)}°c</span>
<span>UV:\u00A0</span> <span id="uv-index">${uvIndex}</span>
</div>
`;
document
.getElementById("weekly-result-container")
.insertAdjacentHTML("afterbegin", markup);
OpenWeatherMap API
Intl.DateTimeFormat
使用dt和date.prototype.ToLocaleString（）中的时间戳（秒）
null
dataWeakly.daily.forEach((day, index) => {
const uvIndex: string = Math.floor(+day.uvi).toString();
if (index < 1) {
return;
}
const markup = `
<div class="weather-daily">
<span id="daily-date">${new Date(day.dt*1000).toLocaleString('en-US',{weekday:'short',month:'short',day:'numeric'})}</span>
<span id="daily-date"></span>
<img id="daily-img" src=http://openweathermap.org/img/wn/${
day.weather[0].icon
}@2x.png alt="weather img"></img>
<span>${toTitleCase(day.weather[0].description)}</span>
<span id="max-weather">${formatNumber(
day.temp.max
)}°c\u00A0\u00A0</span><span id="min-weather">\u00A0${formatNumber(
day.temp.min
)}°c</span>
<span>UV:\u00A0</span> <span id="uv-index">${uvIndex}</span>
</div>
`;
document
.getElementById("weekly-result-container")
.insertAdjacentHTML("afterbegin", markup);
如评论中所建议的那样。 Momentjs可以帮助您
null
const dataWeakly = {
daily: [
{
uvi: 1,
dt: moment("2016-01-31").toDate().valueOf(),
temp: {
min: 12,
max: 24
},
weather: [{
description: 'sunny',
icon: 'sunny.png'
}]
}
]
}
const toTitleCase = (value) => value[0].toUpperCase() + value.slice(1);
const formatNumber = (value) => value.toString(2);
dataWeakly.daily.forEach((day, index) => {
const uvIndex = Math.floor(+day.uvi).toString();
const dayFormatted = moment(day.dt).format("ddd MMM D")
const markup = `
<div class="weather-daily">
<span id="daily-date">${dayFormatted}</span>
<span id="daily-date"></span>
<img id="daily-img" src=http://openweathermap.org/img/wn/${
day.weather[0].icon
}@2x.png alt="weather img"></img>
<span>${toTitleCase(day.weather[0].description)}</span>
<span id="max-weather">${formatNumber(
day.temp.max
)}°c\u00A0\u00A0</span><span id="min-weather">\u00A0${formatNumber(
day.temp.min
)}°c</span>
<span>UV:\u00A0</span> <span id="uv-index">${uvIndex}</span>
</div>
`;
document
.getElementById("weekly-result-container")
.insertAdjacentHTML("afterbegin", markup);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<div id="weekly-result-container"></div>