写一段网页代码用https://openweathermap.org/api获取天气信息
时间: 2023-08-11 13:03:48 浏览: 64
好的,以下是一个使用OpenWeatherMap API获取天气信息的简单网页代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天气查询</title>
</head>
<body>
<h1>输入城市名查询天气</h1>
<form>
<label for="city">城市:</label>
<input type="text" id="city" name="city" placeholder="请输入城市名">
<button type="submit">查询</button>
</form>
<div id="weather"></div>
<script>
const form = document.querySelector('form');
const weatherDiv = document.querySelector('#weather');
form.addEventListener('submit', async event => {
event.preventDefault();
const city = form.elements.city.value;
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&lang=zh_cn&units=metric`);
const data = await response.json();
const temp = data.main.temp;
const description = data.weather[0].description;
const humidity = data.main.humidity;
weatherDiv.innerHTML = `温度:${temp}℃<br>天气情况:${description}<br>湿度:${humidity}%`;
});
</script>
</body>
</html>
```
需要替换代码中的`YOUR_API_KEY`为你自己的API KEY。此外,代码中的API请求URL使用了城市名查询方式,可以根据需要修改为经纬度或者其他方式。