HTML5是一種網(wǎng)頁標準語言，與之相應的，HTML5也提供一種天氣預報代碼，為網(wǎng)站提供實時、可靠的天氣信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天氣預報</title>
</head>
<body>
<h1>當前天氣信息</h1>
<!-- 天氣預報數(shù)據(jù) -->
<script type="text/javascript" src="http://wthrcdn.etouch.cn/weather_mini?city=北京"></script>
<script type="text/javascript">
// 獲取天氣數(shù)據(jù)
var data = JSON.parse(localStorage.getItem('weather_data'));
if (!data || Date.now() - data.timestamp >= 600000) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=北京', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
data = JSON.parse(xhr.responseText);
data.timestamp = Date.now();
localStorage.setItem('weather_data', JSON.stringify(data));
showWeather(data);
}
};
xhr.send();
} else {
showWeather(data);
}
// 展示天氣信息
function showWeather(data) {
document.write('<h2>'+data.desc+'</h2>');
document.write('<ul>');
for(var i = 0; i < data.forecast.length; i++) {
var forecast = data.forecast[i];
document.write('<li>'+ forecast.date +' '+ forecast.type +' '+ forecast.low +' ~ '+ forecast.high +'</li>');
}
document.write('</ul>');
}
</script>
</body>
</html>以上這段代碼，獲取了來自網(wǎng)上的天氣預報數(shù)據(jù)，然后用JSON.parse()解析成JSON格式，通過XMLHttpRequest發(fā)送請求獲取天氣數(shù)據(jù)，具體展示代碼需要根據(jù)業(yè)務需求進行調(diào)整。
下一篇html5小球彈跳代碼