首页html页面显示天气,55-html显示天气预报信息

html页面显示天气,55-html显示天气预报信息

时间: 2024-01-11 20:02:05 浏览: 138

要在HTML页面中显示天气预报信息，可以使用第三方API获取天气数据，然后将数据渲染到HTML页面中。一个常用的天气API是OpenWeatherMap，你可以在其官网上申请API Key，然后使用API来获取天气信息。以下是一个简单的示例代码，可以使用OpenWeatherMap API来获取天气数据并将其渲染到HTML页面中： ```html <!DOCTYPE html> <html> <head> <title>Weather Forecast</title> </head> <body> <h1>Weather Forecast</h1> <p>Loading weather data...</p> <script> // replace YOUR_API_KEY with your actual API Key const apiKey = 'YOUR_API_KEY'; // replace CITY_NAME with the name of the city you want to show weather for const city = 'CITY_NAME'; const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`; fetch(apiUrl) .then(response => response.json()) .then(data => { // parse the weather data and render it to the page const temp = Math.round(data.main.temp - 273.15); const description = data.weather[0].description; const icon = `https://openweathermap.org/img/w/${data.weather[0].icon}.png`; const html = ` <p>${description}</p> <p><img src="${icon}" alt="${description}"></p> <p>Temperature: ${temp} °C</p> `; document.querySelector('p').innerHTML = html; }) .catch(error => { console.error('Error fetching weather data:', error); }); </script> </body> </html> ``` 在以上代码中，你需要将`YOUR_API_KEY`替换为你的OpenWeatherMap API Key，将`CITY_NAME`替换为你要显示天气的城市名称。代码中使用了`fetch`函数来获取API数据，并解析数据并将其渲染到HTML页面中。

阅读全文