<!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: "https://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;
}
});
}
