HTML5在線天氣代碼
使用HTML5可以很方便地實現在線天氣預報功能，下面我們就來看一下代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在線天氣預報</title>
</head>
<body>
<h1>今日天氣預報</h1>
<div id="weather"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=London&appid=API_KEY", true);
xhr.onreadystatechange = function() {
if(xhr.readyState === XMLHttpRequest.DONE) {
if(xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var weather = "天氣：" + data.weather[0].description;
var temp = "溫度：" + (data.main.temp - 273.15).toFixed(1) + "℃";
var humidity = "濕度：" + data.main.humidity + "%";
var wind = "風力：" + data.wind.speed + "m/s";
document.getElementById("weather").innerHTML = weather + "<br>" + temp + "<br>" + humidity + "<br>" + wind;
} else {
alert("連接失敗，請檢查網絡");
}
}
}
xhr.send();
</script>
</body>
</html>以上代碼中，我們使用XMLHttpRequest對象從http://api.openweathermap.org/獲取天氣預報數據，并將其解析成JSON格式，最后通過DOM操作將獲取到的數據顯示在頁面上。
需要注意的是，這里的API_KEY需要替換成自己申請的API key，如果沒有可以到API官網進行申請。