下面是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 函数：
- 一个用于显示天气的函数 displayWeather。
示例
你可以查看这个页面实际的示例完成情况。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS显示日历和天气的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 