在现代网页设计中，JavaScript作为一种强大的编程语言，使得网页不仅仅是静态信息的展示平台，而是可以包含丰富的交互功能和动态内容。今天，我们将通过一个简单的天气预报应用案例，来展示如何使用JavaScript结合HTML和CSS，创建一个既实用又有趣的互动网页。这个案例适合初学者，我们会尽量用通俗易懂的语言来解释每一步。
一、项目概述
我们的目标是创建一个网页，用户可以在其中输入一个城市名，点击按钮后，网页会显示该城市的当前天气情况，包括温度、湿度、风速等信息。为了简化过程，我们将使用OpenWeatherMap
API来获取天气数据。
二、准备工作
在开始编码之前，你需要做一些准备工作：
注册OpenWeatherMap账号：访问OpenWeatherMap官网，注册一个账号并获取一个API密钥。这个密钥将用于访问天气数据。
创建HTML文件：在你的代码编辑器中创建一个新的HTML文件，比如weatherApp.html。
创建CSS文件：为了美化页面，创建一个CSS文件，比如styles.css。
创建JavaScript文件：创建一个JavaScript文件，比如script.js，用于处理逻辑。
三、HTML结构
首先，我们构建基本的HTML结构。这个结构包括一个输入框用于输入城市名，一个按钮用于触发查询，以及一个区域用于显示天气信息。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>天气预报应用</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>天气预报应用</h1>
<input type="text" id="cityInput" placeholder="请输入城市名">
<button id="searchButton">查询天气</button>
<div id="weatherInfo" class="hidden">
<h2 id="cityName"></h2>
<p>温度: <span id="temperature"></span>°C</p>
<p>湿度: <span id="humidity"></span>%</p>
<p>风速: <span id="windSpeed"></span> m/s</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
四、CSS样式
接下来，我们使用CSS来美化我们的网页。将以下代码保存为styles.css。
css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
input, button {
padding: 10px;
font-size: 16px;
margin: 10px 0;
}
button {
cursor: pointer;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #0056b3;
}
.hidden {
display: none;
}
五、JavaScript逻辑
现在，我们开始编写JavaScript代码来处理用户输入并显示天气信息。将以下代码保存为script.js。
javascript
document.addEventListener('DOMContentLoaded', function () {
const apiKey = '你的API密钥'; // 在这里替换为你的OpenWeatherMap
API密钥
const cityInput = document.getElementById('cityInput');
const searchButton = document.getElementById('searchButton');
const weatherInfo = document.getElementById('weatherInfo');
const cityNameElement = document.getElementById('cityName');
const temperatureElement = document.getElementById('temperature');
const humidityElement = document.getElementById('humidity');
const windSpeedElement = document.getElementById('windSpeed');
searchButton.addEventListener('click', function () {
const cityName = cityInput.value.trim();
if (cityName === '') {
alert('请输入一个城市名');
return;
}
fetchWeatherData(cityName);
});
function fetchWeatherData(cityName) {
const url =
`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=metric`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('网络响应失败');
}
return response.json();
})
.then(data => {
displayWeatherInfo(data);
})
.catch(error => {
console.error('错误:', error);
alert('无法获取天气数据，请检查网络连接或城市名是否正确');
});
}
function displayWeatherInfo(data) {
weatherInfo.classList.remove('hidden');
cityNameElement.textContent = data.name;
temperatureElement.textContent = data.main.temp;
humidityElement.textContent = data.main.humidity;
windSpeedElement.textContent = data.wind.speed;
}
});
六、代码解释
HTML部分：
我们创建了一个包含输入框、按钮和天气信息显示区域的简单布局。
weatherInfo div 默认是隐藏的，只有在成功获取天气数据后才会显示。
CSS部分：
设置了页面的基本样式，使其看起来更加美观。
.hidden 类用于隐藏元素，当天气数据加载完毕后，该类会被移除。
JavaScript部分：
使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
定义了apiKey变量来存储你的OpenWeatherMap API密钥。
为搜索按钮添加了点击事件监听器，当用户点击按钮时，会调用fetchWeatherData函数。
fetchWeatherData函数使用fetch
API向OpenWeatherMap发送GET请求，获取天气数据。
如果请求成功，会调用displayWeatherInfo函数来显示天气信息；如果请求失败，会在控制台打印错误信息，并提示用户。
七、运行你的应用
确保你的weatherApp.html、styles.css和script.js文件都在同一个目录下，然后打开weatherApp.html文件，在浏览器中查看效果。输入一个城市名并点击“查询天气”按钮，你应该能够看到该城市的天气信息。
八、总结
通过这个简单的天气预报应用案例，我们学习了如何使用JavaScript结合HTML和CSS创建一个互动网页。这个应用不仅展示了基本的用户输入和数据处理，还使用了API来获取外部数据，这些都是现代网页开发中非常实用的技能。希望这个案例能帮助你更好地理解JavaScript在网页开发中的应用，激发你进一步学习和探索的兴趣。