一、项目背景与目标
本文将创建一个简单的天气预报小程序，该程序能根据用户输入的城市名称，返回该城市的天气信息。我们将使用JavaScript、HTML和CSS来实现这个功能，锻炼我们的前端开发技能。
二、技术需求
- JavaScript基础知识，包括变量、函数、对象等。
- AJAX技术，用于实现与天气API的交互。
- DOM操作，用于从用户输入获取城市信息，并展示天气信息。
三、开发流程
- 创建HTML文件，设置输入框和按钮，以便用户输入城市名称并查询天气。
- 在JavaScript文件中，首先获取用户输入的城市名称，然后使用AJAX技术向天气API发送请求。
- 对API返回的数据进行处理，提取出我们需要的天气信息。
- 使用DOM操作将天气信息展示在页面上。
四、详细步骤与代码
- 创建HTML文件，设置输入框和按钮：
html复制代码
<!DOCTYPE html>
<html>
<head>
<title>天气预报小程序</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input type="text" id="city-input" placeholder="请输入城市名">
<button id="query-btn">查询天气</button>
<div id="weather-info"></div>
<script src="script.js"></script>
</body>
</html>
- 创建JavaScript文件，获取用户输入，向API发送请求，处理返回数据并展示天气信息：
javascript复制代码
document.getElementById("query-btn").addEventListener("click", function() {
// 获取用户输入的城市名称
var cityInput = document.getElementById("city-input").value;
// 向天气API发送请求，获取天气信息
var weatherApi = "http://api.openweathermap.org/data/2.5/weather?q=" + cityInput + "&appid=your_appid";
fetch(weatherApi).then(function(response) {
return response.json();
}).then(function(data) {
// 处理返回的数据，提取出天气信息
var weatherInfo = data.weather[0].main;
// 将天气信息展示在页面上
var weatherElement = document.getElementById("weather-info");
weatherElement.innerText = weatherInfo;
}).catch(function(error) {
console.error("Error:", error);
});
});
- 创建CSS文件，设置页面的样式：
css复制代码
body {
font-family: Arial, sans-serif;
}
#city-input {
width: 200px;
}
#query-btn {
margin-left: 5px;
}
#weather-info {
font-size: 20px;
margin-top: 20px;
}
五、测试与优化
你可以在浏览器中打开HTML文件，输入一个城市名称，点击查询按钮，页面将展示该城市的天气信息。注意需要提前在openweathermap网站上注册一个API key，替换代码中的"your_appid"。如果需要查询更多城市的信息，可以在API的地址中添加"&appid=your_appid&q[]=city1&q[]=city2"，其中city1和city2是需要查询的城市名称。
