正文

html天气预报动态页面代码

小编
小编 V管理员 /0 评论 /16 阅读
0113
欧意国内注册

使用HTML和JavaScript创建天气应用

在现代社会中，天气预报已经成为我们日常生活中不可或缺的一部分，无论是决定穿什么衣服，还是计划户外活动，我们都依赖于准确的天气预报，传统的天气预报方式，如电视、广播或报纸，可能无法满足我们的需求，创建一个个性化的、实时更新的天气应用就显得尤为重要，在这篇文章中，我们将使用HTML和JavaScript来创建一个简单的天气应用。

我们需要创建一个HTML页面，这个页面将包含一个标题，一个用于显示天气信息的段落，以及一个用于输入城市名称的输入框。

<!DOCTYPE html>
<html>
<head>
    <title>我的天气应用</title>
</head>
<body>
    <h1>我的天气应用</h1>
    <p id="weatherInfo"></p>
    <input type="text" id="cityName" placeholder="请输入城市名称">
    <button onclick="getWeather()">获取天气信息</button>
</body>
</html>

接下来，我们需要使用JavaScript来获取天气信息，我们可以使用公开的API，如OpenWeatherMap API，来获取天气数据，我们需要在HTML页面中添加一个script标签，并在其中编写JavaScript代码。

<script>
    function getWeather() {
        var cityName = document.getElementById("cityName").value;
        var apiKey = "你的API密钥"; // 请替换为你的OpenWeatherMap API密钥
        var url = "http://api.openweathermap.org/data/2.5/weather?q=" + cityName + "&appid=" + apiKey;
        fetch(url)
            .then(response => response.json())
            .then(data => {
                var weatherInfo = "城市： " + data.name + "<br>" +
                                  "温度： " + (data.main.temp - 273.15).toFixed(2) + "°C" + "<br>" +
                                  "天气： " + data.weather[0].description;
                document.getElementById("weatherInfo").innerHTML = weatherInfo;
            })
            .catch(error => console.error("Error:", error));
    }
</script>

在这个JavaScript代码中，我们首先获取用户输入的城市名称和API密钥，我们构造一个URL，该URL用于向OpenWeatherMap API发送请求，我们使用fetch函数来发送GET请求到这个URL，当请求成功时，我们将响应转换为JSON格式，并从中提取出天气信息，我们将这些信息显示在HTML页面上。

这就是如何使用HTML和JavaScript创建一个简单的天气应用，请注意，这只是一个基本的示例，实际的应用可能需要处理更多的情况，如错误处理、用户输入验证等，为了保护你的API密钥，你应该将其存储在一个安全的地方，而不是直接写在HTML代码中。