以下是一个用 HTML、CSS 和 JavaScript 编写的简单天气预报小程序示例：
HTML：
<!DOCTYPE html>
<html>
<head>
<title>天气预报</title>
<style>
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}
h2 {
text-align: center;
}
#weather-info {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>天气预报</h2>
<form id="weather-form">
<label for="city">城市：</label>
<input type="text" id="city" name="city" placeholder="输入城市名称">
<button type="submit">查询</button>
</form>
<div id="weather-info"></div>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)：
document.getElementById('weather-form').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单提交
var city = document.getElementById('city').value;
if (city !== '') {
fetchWeather(city);
}
});
function fetchWeather(city) {
// 在这里编写获取天气数据的代码，可以使用第三方API或其他方式获取
}
function displayWeather(weatherData) {
var weatherInfo = document.getElementById('weather-info');
weatherInfo.innerHTML = '当前天气：' + weatherData.weather + ', 温度：' + weatherData.temperature + '℃';
}
以上代码是一个简单的天气预报小程序，通过用户输入城市名称来查询并显示天气信息。其中，你需要在 fetchWeather 函数中编写获取天气数据的逻辑，可以使用第三方API来获取天气数据，并将结果传递给 displayWeather 函数来展示在页面上。
注意：这只是一个基本示例，实际应用中可能涉及更多功能和复杂性。
内容由零声教学AI助手提供，问题来源于学员提问
