HTML5可以用來制作很多實用的應用程序，例如天氣預報。下面是一個天氣仿手機應用程序的HTML5代碼，包括HTML、CSS和JavaScript。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>天氣預報</title>
<style>
body {
font-family: Arial, sans-serif;
}
#container {
width: 320px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 24px;
}
#city {
margin: 20px 0 10px 0;
text-align: center;
font-size: 20px;
}
#weather-icon {
display: block;
margin: 20px auto;
}
#weather-desc {
text-align: center;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
#temp {
text-align: center;
font-size: 30px;
font-weight: bold;
}
#update-time {
text-align: center;
font-size: 14px;
color: #ccc;
}
</style>
</head>
<body>
<div id="container">
<h1>天氣預報</h1>
<p id="city">正在獲取天氣信息...</p>
<img id="weather-icon" src="" alt="">
<p id="weather-desc"></p>
<p id="temp"></p>
<p id="update-time"></p>
</div>
<script>
window.onload = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
var city = data.city;
var weatherDesc = data.weatherDesc;
var temp = data.temp;
var updateTime = data.updateTime;
var weatherIcon = data.weatherIconUrl;
document.getElementById("city").innerHTML = city;
document.getElementById("weather-desc").innerHTML = weatherDesc;
document.getElementById("temp").innerHTML = temp + "°C";
document.getElementById("update-time").innerHTML = "更新時間：" + updateTime;
document.getElementById("weather-icon").src = weatherIcon;
}
};
xhr.open("GET", "http://localhost:8080/weather", true);
xhr.send(null);
};
</script>
</body>
</html>這段代碼包括一個div容器，展示城市、天氣圖標、天氣描述、溫度和更新時間。使用JavaScript從本地服務器獲取天氣數據并將其展示到HTML頁面上。使用CSS對頁面進行布局和樣式化。
上一篇jsp引用css樣式6