天氣查詢之高德地圖天氣預報介面
阿新 • • 發佈：2018-11-13
一、html程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes" /> <link rel="stylesheet" href="js/swiper/HxzsSwiper.min.css" /> <link rel="stylesheet" type="text/css" href="css/iconfont.css"> <link rel="stylesheet" href="css/index.css" /> <title>小胡天氣</title> </head> <style> </style> <body> <p id="currCityName"><img src="img/9.png" /><span>北京市</span></p> <div class="mylayer" onclick="javascript:mylayer();"></div> <img src="img/more.png" class="pulse" onclick="javascript:myshow();" /> <div class="downdiv"> <input placeholder="請輸入城市名稱" id="cityName" /> <span class="select" onclick="javascript:myselect();">查詢</span> </div> <div id="one"></div> <div id="two"> <i class="" id="topimg"></i> <p id="temp"></p> <p id="dayweather"></p> <p id="wind"></p> <p id="date"></p> </div> <div class="swiper-container" id="swipercontainer"> <div class="swiper-wrapper" id="swiperHtml"> </div> </div> <div id="mapID"></div> </body> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript" src="js/swiper/HxzsSwiper.min.js"></script> <script type="text/javascript" src="js/layer_mobile/layer.js"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.4&key=寫自己的key"></script> <script type="text/javascript" src="js/index.js" ></script> </html>
二、css程式碼
* { margin: 0; padding: 0; } body, html { overflow: hidden; position: absolute; width: 100%; height: 100%; color: white; background-image: linear-gradient( to bottom, deepskyblue, deepskyblue); -moz-user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: auto; } p { margin: 0px auto 9px; } #one { font-size: 40px; text-align: center; margin-top: 20%; } #two { text-align: center; } .three { text-align: center; overflow: hidden; } .swiper-container { width: 100%; } .swiper-slide { width: 100%; } .b { float: left; text-align: center; width: 48%; /*border-left: solid 1px white;*/ border-right: solid 1px white; } .c { float: left; text-align: center; width: 48%; } .mylayer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #111; opacity: 0.8; z-index: 4; display: none; } .downdiv { position: absolute; bottom: 0px; width: 100%; background-color: #FFFFFF; height: 180px; z-index: 10; text-align: center; -webkit-transform: translateY(100%); -ms-transform: translateY(-100%); transform: translateY(100%); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .updiv { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .downdiv input { height: 45px; width: 60%; padding-left: 10px; box-sizing: content-box; border: 1px solid #179AFF; color: #179AFF; border-radius: 10px; margin: 65px 0px; outline: none; } .select { width: 75px; border-radius: 20px; height: 40px; line-height: 40px; text-align: center; color: #FFFFFF; background-color: #179AFF; display: inline-block; vertical-align: middle; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; position: absolute; top: 4%; right: 5%; width: 35px; } #two i { font-size: 65px; } section { text-align: center; } section i { font-size: 25px !important; } .layui-m-layercont { color: red; } .layui-m-layer2 .layui-m-layercont p { color: #FFFFFF; } #currCityName { position: absolute; top: 3%; left: 5%; color: #FFFFFF; } #mapID { display: none; } #currCityName img { width: 26%; margin-right: 7px; } #currCityName img, #currCityName span { vertical-align: middle; } /* IPhone 5 */ .item_5_1 { margin-top: 20%; } /* IPhone6 529 */ .item_6_1 { margin-top: 27%; } .item_7_1 { margin-top: 35%; } .item_8_1 { margin-top: 40%; }
三、js程式碼
//enter鍵快捷登入 document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; if (e && e.keyCode == 13) { myselect(); } }; /*地圖定位*/ mapObj = new AMap.Map('mapID'); mapObj.plugin('AMap.Geolocation', function() { geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位，預設:true timeout: 10000 //超過10秒後停止定位，預設：無窮大 }); geolocation.getCurrentPosition(function(status, result) {//定位 if(status == "complete") { //alert(result.addressComponent.province) $("#currCityName span").html(result.addressComponent.province); }else{ $("#currCityName span").html("定位失敗"); } }); //AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位完成資訊 //AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯資訊 }); $(function() { load("北京市"); h = window.innerHeight; //alert(h); StyleMatch(h); }); $("body").on("touchmove",function(event){ event.preventDefault; }, false); /*手機樣式適配函式*/ function StyleMatch(_h){ if(_h < 510) {//5S手機高度：h=504 $("#swipercontainer").addClass("item_5_1"); } else if(_h < 530) {//7p手機高度：h=529 $("#swipercontainer").addClass("item_6_1"); } else if(_h < 540) { $("#swipercontainer").addClass("item_7_1"); } else if(_h < 580) { $("#swipercontainer").addClass("item_8_1"); } else if(_h < 670) { $("#swipercontainer").addClass("item_8_1"); } else { $("#swipercontainer").addClass("item_8_1"); } } /*載入函式*/ function load(adcode) { var loadIndex = layer.open({ type: 2, content: '載入中' }); var postData = { key: 自己申請的key, city: adcode,//城市名稱或者編碼 extensions: "all" }; $.ajax({ type: "get", url: "https://restapi.amap.com/v3/weather/weatherInfo", data: postData, dataType: "jsonp", success: function(data) { if(data.status == 1) { layer.close(loadIndex); if(data.count == 0) { layer.open({ content: '未查詢到該城市資訊，請重新輸入！', btn: '確定' }); } else { var obj = data.forecasts[0]; /*載入上部分的資料*/ $("#one").html(obj.city); var classname = ""; classname = "iconfont " + weatherIcon(obj.casts[0].dayweather); $("#topimg").attr("class", classname); $("#temp").html(obj.casts[0].nighttemp + "℃/" + obj.casts[0].daytemp + "℃"); $("#dayweather").html(obj.casts[0].dayweather); $("#wind").html(obj.casts[0].daywind + "風" + obj.casts[0].daypower + "級"); $("#date").html("" + obj.casts[0].date + " " + formatWeek(obj.casts[0].week)); /*下面的輪播圖資料*/ var casts = data.forecasts[0].casts; var resultStr = ""; $.each(casts, function(i, item) { resultStr += "<div class=\"swiper-slide\">"; resultStr += " <section>"; resultStr += " <p>" + formatWeek(item.week) + "</p>"; resultStr += " <i class=\"iconfont " + weatherIcon(item.dayweather) + "\"></i>"; resultStr += " <p>" + item.nighttemp + "℃/" + item.daytemp + "℃" + "</p>"; resultStr += " <p>" + item.dayweather + "</p>"; resultStr += " </section>"; resultStr += "</div>"; }); $("#swiperHtml").html(resultStr); var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 2, spaceBetween: 0 }); $(".mylayer").hide(); $('.downdiv').removeClass("updiv"); } } else { layer.close(loadIndex); layer.open({ content: '未查詢到該城市資訊，請重新輸入！', btn: '確定' }); } } }); } /*點選遮罩層函式*/ function mylayer() { $(".mylayer").hide(); $('.downdiv').removeClass("updiv"); } /*右上角圖示點選函式*/ function myshow() { $(".mylayer").show(); $('.downdiv').addClass("updiv"); $(".downdiv").show(); } /*點選查詢函式*/ function myselect() { var cityName = $("#cityName").val(); if(cityName == "") { layer.open({ content: '請輸入城市名稱！', btn: '確定' }); return; } else { load(cityName); } } /*預報圖示函式*/ function weatherIcon(str) { var res = ""; if(/^晴$/.test(str)) { res = "icon-qing"; } else if(/^小雨$/.test(str)) { res = "icon-xiaoyu1"; } else if(/^中雨$/.test(str)) { res = "icon-zhongyu "; } else if(/^大雨$/.test(str)) { res = "icon-dayu"; } else if(/^大暴雨$/.test(str)) { res = "icon-dabaoyu"; } else if(/^陣雨$/.test(str)) { res = "icon-zhenyu"; } else if(/^雷陣雨$/.test(str)) { res = "icon-leizhenyu"; } else if(/^雷電$/.test(str)) { res = "icon-leidian"; } else if(/^凍雨$/.test(str)) { res = "icon-dongyu"; } else if(/^冰雹$/.test(str)) { res = "icon-tianqitubiao_bingbao"; } else if(/^大風$/.test(str)) { res = "icon-tianqitubiao_dafeng"; } else if(/^揚沙$/.test(str)) { res = "icon-tianqitubiao_yangsha"; } else if(/^浮塵$/.test(str)) { res = "icon-fuchen"; } else if(/^沙塵暴$/.test(str)) { res = "icon-shachenbao"; } else if(/^霧霾$/.test(str)) { res = "icon-wumai"; } else if(/^霧$/.test(str)) { res = "icon-wu"; } else if(/雪/.test(str)) { res = "icon-baoxue"; } else if(/^多雲$/.test(str)) { res = "icon-duoyun"; } else if(/^陰$/.test(str)) { res = "icon-yin"; } return res; } /*判斷星期幾*/ function formatWeek(k) { var res = ""; if(k == 1) { res = "星期一"; } else if(k == 2) { res = "星期二"; } else if(k == 3) { res = "星期三"; } else if(k == 4) { res = "星期四"; } else if(k == 5) { res = "星期五"; } else if(k == 6) { res = "星期六"; } else if(k == 7) { res = "星期日"; } return res; }
