第一次前端實習機試題 很粗糙的一個天氣預報demo
- 2020 年 6 月 11 日
- 筆記
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
body{
background-image: url(img/timg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#top{
text-align: center;
width:100%;
height:80px;
font:80px LiSu; }
h3{
color: azure;
margin-left: 18px;
padding-top: 5px;
}
#weather{
height: 600px;
}
#p1{
color:black;
font-size: 30px;
font-family:LiSu;
margin-bottom: 30px;
margin-left:240px;
}
form{
margin-left: 360px;
}
#city {
padding: 8px;
width: 200px;
height: 16px;
border: 1px solid #00ff00;
}
#Search {
width: 80px;
height: 30px;
background-color: #000;
color: #fff;
border: 0;
vertical-align: middle;
}
#Search:hover {
background-color: #00ff00;
color: #ff6600;
}
#left{
margin-left: 420px;
margin-top: 93px;
color: rgb(0, 81, 255);
font-size: 200px;
font-family: LiSu;
}
.up{
margin-left: 144px;
padding-top: 70px;
width:100%;
height:50px;
font-family: LiSu;
}
#right{
margin-left: 360px;
margin-top: -100px;
color: rgba(0, 0, 255, 0.651);
font-size: 30px;
font-family:LiSu;
}
img{
width: 20px;
height: 20px;
}
#btn{
width: 40px;
height: 20px;
color: blanchedalmond;
border:1px solid black;
border-radius: 45%;
background-color:black;
}
#topCoverDiv
{
opacity: 0.8;
width: 100%;
height: 450px;
top: 0px;
background-image: url(img/u=2339574525,672573164&fm=26&gp=0.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 100;
/* text-align: center; */
}
#topCoverDiv>input{
width:100px;
height:50px;
margin:45px;
}
</style>
</head>
<body>
<div id=”top”>
<h3>深圳天氣</h3>
<!– 搜索功能 –>
<!– <form action=”” onsubmit=”return false;”>
<input type=”text” name=”” id=”city” placeholder=”請輸入行政區或行政區編碼”>
<input type=”submit” value=”搜索” id=”search”>
</form> –>
</div>
<div id=”weather”>
<div v-for=”(item) in weatherData.lives”>
<div class=”up”>
<p id=”p1″>
<img src=”img/9.png” alt=””>地區：{{ item.city }}
<button onclick=”btn()” id=”btn”>切換</button>
{{item.reporttime}}更新
<br>
<!– 搜索功能 –>
<form action=”” onsubmit=”return false;”>
<input type=”text” name=”” id=”city” placeholder=”請輸入行政區或行政區編碼”>
<input type=”submit” value=”搜索” @click=”search” id=”Search”>
</form>
</p>
</div>
<!– 行政區div –>
<div id=”topCoverDiv” style=”display:none;”>
<input type=”submit” value=”羅湖區” onclick=”change(440303)”>
<input type=”submit” value=”福田區” onclick=”change(440304)”>
<input type=”submit” value=”南山區” onclick=”change(440305)”>
<input type=”submit” value=”寶安區” onclick=”change(440306)”>
<input type=”submit” value=”龍崗區” onclick=”change(440307)”>
<input type=”submit” value=”鹽田區” onclick=”change(440308)”>
<input type=”submit” value=”龍華區” onclick=”change(440309)”>
<input type=”submit” value=”坪山區” onclick=”change(440310)”>
<input type=”submit” value=”光明區” onclick=”change(440311)”>
</div>
<!– 溫度 –>
<div id=”left”>
{{item.temperature}}
<div id=”right”>
<img src=”img/8.png” alt=””>
{{ item.winddirection}}風
{{item.windpower}}級<br>
<img src=”img/5.png” alt=””>
相對濕度:{{item.humidity}}%
</div>
</div>
<!– <li>天氣現象:{{ item.weather }}</li>
<li>實時氣溫:{{ item.temperature}}攝氏度</li> –>
<!– <li>風向:{{ item.winddirection }}</li>
<li>風力級別:{{item.windpower}}</li>
<li>空氣濕度:{{item.humidity}}</li
<li>時間:{{item.reporttime}}</li> –>
</div>
</div>
<!– 引入 –>
<script src=”js/jquery-1.11.3.js”></script>
<script src=”js/vue.js”></script>
<script src=”weather.js”></script>
</body>
</html>
js程式碼
// function search(){
//搜索框值賦值給函數cityWeather
// cityWeather($(city).val());
// }
// 切換行政區
function btn(){
var maskBg = document.getElementById(‘topCoverDiv’);
maskBg.style.display = (maskBg.style.display == ‘none’) ? ‘block’ : ‘none’;
}
function change(adcode){
cityWeather(adcode);
}
// vue展示
var vmWeather = new Vue({
el:”#weather”,
data:{
weatherData:{}
},
methods:{
search(){
cityWeather($(city).val());
}
}
})
// 默認顯示
cityWeather(“440305”);
// 天氣介面
function cityWeather(adcode) {
// 清空對象
vmWeather.weatherData={};
$.ajax({
type: “GET”,//默認是GET
url: “//restapi.amap.com/v3/weather/weatherInfo”,
dataType: “jsonp”,
data: {
city:adcode, // 城市
output: “json”, // 格式
extensions:”base”,//實況天氣
key: “704c3fe97b70e90c1e5db80a3363ef2f” // 高德地圖
},
success: function (data) {
console.log(data);
vmWeather.weatherData = data;
}
});
}
