目錄
一、作業(yè)要求
二、題目分析
三、最終演示
四、代碼
五、心得
一、作業(yè)要求
利用百度主頁的天氣查詢程序?qū)崿F(xiàn)一個可以實時查詢武漢市天氣的靜態(tài)頁面
提示：獲取天氣數(shù)據(jù)的地址為（http://www.baidu.com/home/other/data/weatherInfo?city=武漢），
（該網(wǎng)站返回一個json對象）界面要求如下圖。
?
二、題目分析
用html和css實現(xiàn)界面布局，通過網(wǎng)站返回的json數(shù)據(jù)實現(xiàn)要求。天氣圖標(biāo)需要用到j(luò)son返回的數(shù)據(jù)來調(diào)用本地文件。
三、最終演示
?
四、代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天氣查詢</title>
<link rel="stylesheet" href="../css/weather.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<h1>城市：遵義</h1>
<ul>
<li>
<h2>今天</h2>
<span id="today">今天是：</span>
<span id="lunar">農(nóng)歷：</span>
<div class="condition_1">天氣：</div>
<div class="wind_1">風(fēng)：</div>
<div class="temp_1">溫度：</div>
<div class="pm25_1">pm2.5：</div>
<div class="pollution_1">空氣質(zhì)量：</div>
<img id="img" src="">
</li>
<li>
<h2>明天</h2>
<span id="tomorrow">明天是：</span>
<div class="condition_2">天氣：</div>
<div class="wind_2">風(fēng)：</div>
<div class="temp_2">溫度：</div>
<div class="pm25_2">pm2.5：</div>
<div class="pollution_2">空氣質(zhì)量：</div>
<img id="img2" src="">
</li>
<li>
<h2>后天</h2>
<span id="thirdday">后天是：</span>
<div class="condition_3">天氣：</div>
<div class="wind_3">風(fēng)：</div>
<div class="temp_3">溫度：</div>
<div class="pm25_3">pm2.5：未知</div>
<div class="pollution_3">空氣質(zhì)量：</div>
<img id="img3" src="">
</li>
<li>
<h2>第四天</h2>
<span id="fourthday">第四天是：</span>
<div class="condition_4">天氣：</div>
<div class="wind_4">風(fēng)：</div>
<div class="temp_4">溫度：</div>
<div class="pm25_4">pm2.5：未知</div>
<div class="pollution_4">空氣質(zhì)量：未知</div>
<img id="img4" src="">
</li>
<li>
<h2>第五天</h2>
<span id="fifthday">第五天是：</span>
<div class="condition_5">天氣：</div>
<div class="wind_5">風(fēng)：</div>
<div class="temp_5">溫度：</div>
<div class="pm25_5">pm2.5：未知</div>
<div class="pollution_5">空氣質(zhì)量：未知</div>
<img id="img5" src="">
</li>
</ul>
<script>
var jsonHandler = function(weatherInfo)
{
var data = weatherInfo.data.weather.content;
document.querySelector('#today').innerText += data.today.time;
document.querySelector('#tomorrow').innerText += data.tomorrow.time;
document.querySelector('#thirdday').innerText += data.thirdday.time;
document.querySelector('#fourthday').innerText += data.fourthday.time;
document.querySelector('#fifthday').innerText += data.fifthday.time;
document.querySelector('#lunar').innerText += data.calendar.lunar;
var condition_1 = document.querySelector(".condition_1");condition_1.innerText += data.today.condition;
var condition_2 = document.querySelector(".condition_2");condition_2.innerHTML += data.tomorrow.condition;
var condition_3 = document.querySelector(".condition_3");condition_3.innerHTML += data.thirdday.condition;
var condition_4 = document.querySelector(".condition_4");condition_4.innerHTML += data.fourthday.condition;
var condition_5 = document.querySelector(".condition_5");condition_5.innerHTML += data.fifthday.condition;
var wind_1 = document.querySelector(".wind_1");wind_1.innerHTML += data.today.wind;
var wind_2 = document.querySelector(".wind_2");wind_2.innerHTML += data.tomorrow.wind;
var wind_3 = document.querySelector(".wind_3");wind_3.innerHTML += data.thirdday.wind;
var wind_4 = document.querySelector(".wind_4");wind_4.innerHTML += data.fourthday.wind;
var wind_5 = document.querySelector(".wind_5");wind_5.innerHTML += data.fifthday.wind;
var temp_1 = document.querySelector(".temp_1");temp_1.innerHTML += data.today.temp;
var temp_2 = document.querySelector(".temp_2");temp_2.innerHTML += data.tomorrow.temp;
var temp_3 = document.querySelector(".temp_3");temp_3.innerHTML += data.thirdday.temp;
var temp_4 = document.querySelector(".temp_4");temp_4.innerHTML += data.fourthday.temp;
var temp_5 = document.querySelector(".temp_5");temp_5.innerHTML += data.fifthday.temp;
var pollution_1 = document.querySelector(".pollution_1"); pollution_1.innerHTML += data.today.pollution;
var pollution_2 = document.querySelector(".pollution_2"); pollution_2.innerHTML += data.tomorrow.pollution;
var pollution_3 = document.querySelector(".pollution_3"); pollution_3.innerHTML += data.thirdday.pollution;
var pm25_1 = document.querySelector(".pm25_1");pm25_1.innerHTML+= data.today.pm25;
var pm25_2 = document.querySelector(".pm25_2");pm25_2.innerHTML+= data.tomorrow.pm25;
var a1 =data.today.imgs[1];document.querySelector('#img').src = "../img/weather_icon/"+a1+".jpg";
var a2 =data.tomorrow.imgs[1];document.querySelector('#img2').src = "../img/weather_icon/"+a2+".jpg";
var a3 =data.thirdday.imgs[1];document.querySelector('#img3').src = "../img/weather_icon/"+a3+".jpg";
var a4 =data.fourthday.imgs[1];document.querySelector('#img4').src = "../img/weather_icon/"+a4+".jpg";
var a5 =data.fifthday.imgs[1];document.querySelector('#img5').src = "../img/weather_icon/"+a5+".jpg";
}
var jsonData = document.createElement("script");
jsonData.src = "https://www.baidu.com/home/other/data/weatherInfo?city="+encodeURI("遵義")+"&&callback=jsonHandler"
document.querySelector("head").appendChild(jsonData)
</script>
</body>
</html>css文章來源：http://www.zghlxwxcb.cn/news/detail-512257.html
ul {
font-size: larger;
font-style: normal;
}
ul li {
vertical-align: top;
text-align: left;
width: 230px;
height: 260px;
color: #fcfcfcec;
background: url(../img/OIP-C.jpg) ;
background-size: 100%;
background-repeat: no-repeat;
background-color: rgb(244, 247, 247);
padding: 0px 10px;
font-size: 10px;
border: 1px rgb(0, 0, 0);
display: inline-block;
}
h1
{
color: #45ad2e;
width: 1500px;
height: 60px;
background: url(../img/h1.jpg);
background-size: 100%;
background-color: aliceblue;
font-size: 20px;
font-style: normal;
color: rgb(12, 1, 1);
text-align: center;
}
body
{
width: 1500px;
height: 600px;
background: url(../img/back-green.jpg);
background-size: 100%;
background-repeat: no-repeat;
}五、心得
剛開始學(xué)習(xí)html，遇到很多難題，走了很多彎路，比如如何橫向布局，如何通過網(wǎng)站返回的json文件里的一個數(shù)據(jù)（a0）去調(diào)用本地img名為a0.jpg的圖片（上網(wǎng)搜索也無果，可能是過于簡單）。終究是完成自己的第一個html靜態(tài)頁面。文章來源地址http://www.zghlxwxcb.cn/news/detail-512257.html
到了這里，關(guān)于html作業(yè)天氣查詢界面（html+css）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
