中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
HTML5 axios 天气查询 html5 编写界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>weather</title> <link rel="stylesheet" href="css/init.css" /> <link rel="stylesheet" href="css/index.css" /> <script src="./vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div class="wrap" id="app"> <div class="search_form"> <div class="logo"><img src="img/1.png"/></div> <div class="form_group"> <input type="text" v-model="city" @keydown.enter="search" class="input_txt" placeholder="请输入查询的天气" value="芜湖"/> <button v-auto @click="search" class="input_sub"> 搜 索 </button> </div> <div class="hotkey"> <a href="javascript:;" @click="changeCity('北京')">北京</a> <a href="javascript:;" @click="changeCity('上海')">上海</a> <a href="javascript:;" @click="changeCity('广州')">广州</a> <a href="javascript:;" @click="changeCity('深圳')">深圳</a> <a href="javascript:;" @click="changeCity('芜湖')">芜湖</a> <a href="javascript:;" @click="changeCity('枣庄')">枣庄</a> </div> </div> <ul class="weather_list"> <li v-for=" item in list"> <div class="info_type"><span class="iconfont">{{item.type}}</span></div> <div class="info_temp"> <b>{{item.low}}</b> <b>{{item.high}}</b> </div> <div class="info_date"><span>{{item.date}}</span></div> </li> </ul> </div> <script src="js/index.js"></script> </body> </html>
css代码
body{ font-family:'Microsoft YaHei'; } .wrap{ position: fixed; left:0; top:0; width:100%; height:100%; background:#fff; } .search_form{ width:640px; margin:100px auto 0; } .logo{ text-align: center; } .form_group{ width:640px; height:40px; margin-top:45px; } .input_txt{ box-sizing: border-box; width:540px; height:38px; padding:0px; float:left; border:1px solid #41a1cb; outline:none; text-indent:10px; font-size: 16px; } /*修改placeholder中字体颜色 只能用这个*/ .input_txt::placeholder{ color: pink; } .input_sub{ width:100px; height:40px; border:0px; float: left; background-color: #41a1cb; color:#fff; font-size:16px; outline:none; cursor: pointer; position: relative; } .input_sub.loading::before{ content:''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../img/loading.gif'); } .hotkey{ margin:3px 0 0 2px; } .hotkey a{ font-size:14px; color:#666; padding-right:15px; } .weather_list{ height:200px; text-align:center; margin-top:50px; font-size:0px; } .weather_list li{ display:inline-block; width:140px; height:200px; padding:0 10px; overflow: hidden; position: relative; background:url('../img/line.png') right center no-repeat; background-size: 1px 130px; } .weather_list li:last-child{ background:none; } .info_date{ width:100%; height:40px; line-height:40px; color:#999; font-size:14px; left:0px; bottom:0px; margin-top: 15px; } .info_date b{ float: left; margin-left:15px; } .info_type span{ color:#6e52fd; font-size:30px; line-height:80px; } .info_temp{ font-size:14px; color:#fda252; } .info_temp b{ font-size:13px; } .tem .iconfont { font-size: 50px; }
网页界面
JavaScript代码
el:"#app", data:{ city:"芜湖", list:[], }, methods:{ search:function () { var that=this if(this.city){ axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`) .then(function (response) { // console.log(response.data.data.forecast) that.list=response.data.data.forecast } ) .catch(function (erro) { alert("不是合法的地名喔") }) }else{ alert("不能输入空值哦") } }, changeCity:function (city) { this.city=city this.search() } }, // el是被绑定的元素 directives:{ auto:{ inserted(el){ el.click() } } } })
微信扫码分享