Question

我有一个循环，可为接下来的7天每天创建一个元素，并显示特定日期的天气数据。（从API获取数据）。我不知道如何在每个循环中插入日期。该日期应位于span元素中，其ID为“每日天气”

我想要达到的日期格式是： “太阳” “ 1月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);

Answer 1

OpenWeatherMap API

Intl.DateTimeFormat

使用dt和Date.prototype.toLocaleString()中的时间戳（以秒为单位）

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);

Answer 2

按照评论中的建议。 Momentjs可以帮助您

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>

在JavaScript中获取天气预报的日期（7天）

2 个答案: