想了想一开始还真不知道写什么项目来使用JavaScript实现某个功能或解决某个问题,但由于今天天气太热,既然与天气有关,那今天就写一个关于获取天气情况的程序吧. 使用JavaScript构建简单的天气应用程序。这个应用程序将调用一个外部API来获取天气数据，并将这些信息显示在网页上。将使用到的技术包括：HTML，CSS，JavaScript，以及Fetch API进行网络请求。
运行时，需要替换代码中的"your_api_key"为你自己的OpenWeatherMap API密钥。
1.创建一个包含输入框、按钮和用于显示天气信息的div的表单
```<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript 天气应用</title>
</head>
<body>
<h1>JavaScript 天气应用</h1>
<form id="weather-form">
<label for="city">城市:</label>
<input type="text" id="city" placeholder="输入城市名...">
<button type="submit">查询</button>
</form>
<div id="weather-info"></div>
</body>
</html>
首先在HTML中创建了一个表单，用户可以在其中输入城市名称。监听表单的"submit"事件，当用户提交表单后，阻止表单的默认提交行为，然后使用用户输入的城市名称构建一个URL，用于请求天气数据。
2.设置了一些基本的样式，如字体和间距。
```body {
font-family: Arial, sans-serif;
}
form {
margin-bottom: 20px;
}
#weather-info {
margin-top: 20px;
}
3.JavaScript部分：
- 监听表单的提交事件，当用户提交表单时执行相应的代码。
- 阻止表单的默认提交行为，以便使用自定义的代码处理表单提交。
- 获取用户输入的城市名称。
- 构建用于请求天气数据的URL，将用户输入的城市名称和API密钥添加到URL中。
- 使用Fetch API发送HTTP GET请求，并处理返回的Promise。
- 检查响应的状态码，如果不是200，则抛出一个错误。
- 如果请求成功，将响应体解析为JSON格式。
- 将天气数据插入到HTML字符串中，并将该字符串设置为指定元素的HTML内容。
- 如果请求或解析过程中出现错误，捕获错误并在控制台输出错误信息
```// 监听表单的提交事件
document.getElementById('weather-form').addEventListener('submit', event => {
event.preventDefault(); // 阻止默认的表单提交行为
// 获取用户输入的城市名称
const city = document.getElementById('city').value;
// 构建用于请求天气数据的URL
const url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=your_api_key`;
// 使用Fetch API发送HTTP GET请求
fetch(url)
.then(response => {
if (!response.ok) { // 如果响应的状态码不是200，抛出一个错误
throw new Error(`Status Code: ${response.status}`);
}
return response.json(); // 解析响应为JSON格式
})
.then(data => {
const weatherDiv = document.getElementById('weather-info');
// 将天气数据插入到HTML字符串中，并设置为weather-info元素的HTML内容
weatherDiv.innerHTML = `
<h2>${data.name}</h2>
<p>${data.weather[0].description}</p>
<p>温度: ${data.main.temp - 273.15}°C</p>
`;
})
.catch(error => console.log('There was an error:', error)); // 捕获请求或解析错误，并在控制台输出错误信息
}, false);
使用Fetch API请求这个URL，然后处理返回的Promise。如果响应的状态码不是200，抛出一个错误。否则，将响应体解析为JSON。
解析为JSON的响应体包含需要的天气数据，将这些数据插入到一个HTML字符串中，然后将这个字符串设置为#weather-info元素的HTML内容。
over!!!
