JS显示日历和天气的方法

2023年5月27日下午3:34 • JavaScript

下面是JS显示日历和天气的方法的完整攻略。

显示日历

通过 JavaScript 可以在网页上添加一个简单的日历。可以使用 JavaScript 创建一个动态日历，该日历能够：

显示当前的日期，以便用户可以了解今天是哪一天。
显示当前月份的日历，以便用户可以在网站上浏览日历，并获得其他有关当前月份的信息。

HTML代码

为了创建一个简单的日历，我们需要至少创建两个 HTML 元素：一个用于显示日期，另一个用于显示日历。

<!DOCTYPE html>
<html>
<head>
<title>JavaScript 日历示例</title>
</head>
<body>
<h1>JavaScript 日历</h1>
<p id="date"></p>
<table id="calendar">
<tr>
<th>星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
</table>
<script src="calendar.js"></script>
</body>
</html>

此示例包含以下 HTML 元素：

一个标题标签，用于告知用户这是一个日历示例。
一个段落标签，用于显示当前的日期。
一个表格标签，用于显示日历。

JavaScript代码

在 JavaScript 中，我们可以通过编写代码动态更新日期和日历。在这个例子中，我们使用了一个自动更新当前日期的函数，以及一个用于生成日历的函数。

const daysOfWeek = ["日", "一", "二", "三", "四", "五", "六"];

function displayDate() {
  const dateElement = document.getElementById("date");
  const date = new Date();
  const dateString = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日（星期${daysOfWeek[date.getDay()]}）`;
  dateElement.innerText = dateString;
}

function displayCalendar() {
  const calendarElement = document.getElementById("calendar");
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth();
  const firstDayOfMonth = new Date(year, month, 1);
  const lastDayOfMonth = new Date(year, month + 1, 0);
  let row = document.createElement("tr");
  let cell = document.createElement("td");
  cell.innerText = "";
  row.appendChild(cell);
  for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
    let cell = document.createElement("td");
    cell.innerText = "";
    row.appendChild(cell);
  }
  for (let i = 1; i <= lastDayOfMonth.getDate(); i++) {
    if (row.children.length === 7) {
      calendarElement.appendChild(row);
      row = document.createElement("tr");
    }
    let cell = document.createElement("td");
    cell.innerText = i;
    row.appendChild(cell);
  }
  while (row.children.length < 7) {
    let cell = document.createElement("td");
    cell.innerText = "";
    row.appendChild(cell);
  }
  calendarElement.appendChild(row);
  calendarElement.addEventListener("click", event => {
    const cell = event.target;
    if (cell.tagName === "TD" && cell.innerText.trim() !== "") {
      alert(`您点击了${year}年${month + 1}月${cell.innerText}日（星期${daysOfWeek[cell.cellIndex]}）`);
    }
  });
}

displayDate();
displayCalendar();
setInterval(displayDate, 1000 * 60 * 60 * 24);

此示例包含以下 JavaScript 函数：

一个用于动态显示日期的函数 displayDate（日期每隔 1 天更新）
一个用于生成并显示日历的函数 displayCalendar

示例

你可以查看这个页面实际的示例完成情况。

显示天气

通过 JavaScript 可以使用天气 API 实时获取和显示天气信息。这需要使用一些第三方 API。这里以 OpenWeatherMap API 为例。

HTML代码

为了显示天气，需要创建两个 HTML 元素：一个用于显示当前温度，另一个用于显示当前城市。

<!DOCTYPE html>
<html>
<head>
<title>JavaScript 天气示例</title>
</head>
<body>
<h1>JavaScript 天气</h1>
<p id="temperature"></p>
<p id="city"></p>
<script src="weather.js"></script>
</body>
</html>

JavaScript代码

在 JavaScript 中，我们可以使用 AJAX 调用 OpenWeatherMap API，并从 API 中获取实时天气信息。然后，我们可以在网页中显示天气信息。

function displayWeather() {
  const temperatureElement = document.getElementById("temperature");
  const cityElement = document.getElementById("city");
  const url = "https://api.openweathermap.org/data/2.5/weather?q=北京&appid=<open_weather_api_key>";
  fetch(url)
    .then(response => response.json())
    .then(data => {
      const temperature = Math.round(data.main.temp - 273.15);
      const cityName = data.name;
      temperatureElement.innerText = `${temperature}°C`;
      cityElement.innerText = cityName;
    });
}

displayWeather();
setInterval(displayWeather, 1000 * 60 * 60);

此示例包含以下 JavaScript 函数：