在javascript中获取天气预报（7天）的日期[重复]答案

【问题标题】：Get date for weather forecast (7 days) in javascript [duplicate]在javascript中获取天气预报（7天）的日期[重复]
【发布时间】：2020-10-03 22:22:45
【问题描述】：

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

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

【问题讨论】：

恐怕现代浏览器无法做到这一点，因为它们可以防止跨站点脚本。
使用momentjs处理天数和日期显示，比原生Date对象更加灵活方便。
谢谢@Frax 会检查一下 momentjs

标签： javascript html loops date foreach

【解决方案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);

【讨论】：

这给了我格式谢谢！但它没有给我当天的准确日期
现在可以用了吗？他们给出的秒数不是毫秒，所以需要 *1000
好的，谢谢！完美运行-我会看看你是怎么做到的！

【解决方案2】：

按照 cmets 中的建议。 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>

【讨论】：