B站小项目(天知道),记录一下。
一、实现效果
输入要查询的城市,回车,返回该城市近五天的天气情况
点击输入框下面的城市,输入框内容自动变成刚才点击的城市,并返回该城市近五天的天气情况
二、运行界面
三、代码
html+css:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
h1{
margin-top: 50px;
margin-bottom: 30px;
text-align:center;
font-family: "隶书";
font-size: 30px;
color: DeepSkyBlue;
}
.search{
width: 500px;
/*注意:这里的高度改变,它的子元素是行内元素,按说高度按内容撑开,子元素的高度不会改变,
* 但是由于当前元素是弹性容器,弹性容器align-items属性默认值是伸展开,所以子元素的
* 高度会随当前元素的高度变化而变化。要想子元素高度不变,就要设置align-items的属性
* 值不是stretch*/
height: 28px;
margin: 0 auto;
border:1px solid deepskyblue;
display: flex;
/*align-items:flex-start;*/
}
input::-webkit-input-placeholder {
color: #808080;
}
.content{
flex: 10;
border: none;
padding: 3px;
}
.btn{
flex: 1;
border: none;
background-color: deepskyblue;
}
.city{
margin-left: 450px;
padding-top: 5px;
font-size: 10px;
color: #808080;
}
a{
margin-right: 10px;
}
ul{
display: flex;
width: 800px;
margin: 30px auto;
}
li{
flex: 2;
}
li:not(:last-child){
/*background:linear-gradient(white,#808080,white);*/
border-right: 1px solid gainsboro;
}
.weather{
display: block;
margin-bottom: 10px;
text-align: center;
color: darkorange;
}
.temperature{
display: block;
margin-bottom: 14px;
text-align: center;
color: darkorange;
font-size: 12px;
}
.date{
display: block;
margin-bottom: 14px;
text-align: center;
color: #808080;
font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
<h1 class="title">天知道</h1>
<div class="search">
<input v-model="city" @keyup.enter="searchWeather" type="text" class="content" placeholder="请输入查阅的天气" />
<input type="button" value="搜索" class="btn"/>
</div>
<div class="city">
<a class="bj" @click="changeCity('北京')">北京</a>
<a class="sh" @click="changeCity('上海')">上海</a>
<a class="gz" @click="changeCity('广州')">广州</a>
<a class="sz" @click="changeCity('深圳')">深圳</a>
</div>
<ul class="info">
<li v-for="(item,index) in weatherList">
<div class="wea"><span class="weather">{{item.type}}</span></div>
<div class="tem"><span class="temperature">{{item.low}}~{{item.high}}</span></div>
<div class="dat"><span class="date">{{item.date}}</span></div>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./weather.js"></script>
</body>
</html>
js:
var item=new Vue({
el:"#app",
data:{
city:"",
weatherList:[]
},
methods:{
searchWeather:function(){
var that=this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(function(response){
console.log(response.data.data.forecast);
that.weatherList=response.data.data.forecast;
})
.catch(function(err){})
},
changeCity:function(nowCity){
this.city=nowCity;
this.searchWeather();
}
}
})