获取当前的IP定位
//获取当前的IP定位; var key = "4d9a765939a2b76588a3341c2***" var url = "https://restapi.amap.com/v3/ip?key=" + key; $.getJSON(url, function (res) { //console.log(res); var adcode = res.adcode; $("#ip").html("当前位置：" + res.province + res.city); //显示天气情况; getWeather(adcode, key) })
获取天气情况函数
//天气函数; function getWeather(adcode, key) { /*天气查询API*/ var url = 'https://restapi.amap.com/v3/weather/weatherInfo?city=' + adcode + '&key=' + key + '&extensions=all'; $.getJSON(url, function (res) { //console.log(res); //当前星期; $(".date-dayname").html(getWeek(res.forecasts[0].casts[0].week)); //当前时间; $(".date-day").html(res.forecasts[0].reporttime.slice(0, 10)); //所在地区; $(".location").html(res.forecasts[0].city); //当天温度; $(".weather-temp").html(res.forecasts[0].casts[0].daytemp + "°C"); //当天天气现象; $(".weather-desc").html(res.forecasts[0].casts[0].dayweather); //当天风力; $("#daypower").html(res.forecasts[0].casts[0].daypower); //当天风向; $("#daywind").html(res.forecasts[0].casts[0].daywind); //当天天气现象; $("#dayweather").html(res.forecasts[0].casts[0].dayweather); //四日预报，星期 $("#week0").html(getWeek(res.forecasts[0].casts[0].week)); $("#week1").html(getWeek(res.forecasts[0].casts[1].week)); $("#week2").html(getWeek(res.forecasts[0].casts[2].week)); $("#week3").html(getWeek(res.forecasts[0].casts[3].week)); //四日预报，温度 $("#temp0").html(res.forecasts[0].casts[0].daytemp + "°C"); $("#temp1").html(res.forecasts[0].casts[1].daytemp + "°C"); $("#temp2").html(res.forecasts[0].casts[2].daytemp + "°C"); $("#temp3").html(res.forecasts[0].casts[3].daytemp + "°C"); //天气图标; $("#icon").html(getIcon(0, "day", res.forecasts[0].casts[0].dayweather)); $("#icon0").html(getIcon(1, "day", res.forecasts[0].casts[0].dayweather)); $("#icon1").html(getIcon(1, "day", res.forecasts[0].casts[1].dayweather)); $("#icon2").html(getIcon(1, "day", res.forecasts[0].casts[2].dayweather)); $("#icon3").html(getIcon(1, "day", res.forecasts[0].casts[3].dayweather)); }) }
判断星期
//判断星期; function getWeek(week) { switch (week) { case "1": return "星期一" break; case "2": return "星期二" break; case "3": return "星期三" break; case "4": return "星期四" break; case "5": return "星期五" break; case "6": return "星期六" break; case "7": return "星期日" break; default: return "异常" } }
判断天气情况返回对应图图标
//按天气情况返回对应图图标; /* local图标位置，0->60px；1->30px; * times,day->白天；night->晚上; * desc天气描述; */ function getIcon(local, times, desc) { var iconWidth, url; //图标尺寸判断; if (local == 0) { iconWidth = "80px"; } else { iconWidth = "30px"; } //图标类型判断; if (times == "day") { url = "img/day/" } else { url = "img/night/" } //天气描述图标; switch (desc) { case "晴": return '<img src="' + url + '00.png" width=' + iconWidth + '>' break; case "多云": return '<img src="' + url + '01.png" width=' + iconWidth + '>' break; case "阴": return '<img src="' + url + '02.png" width=' + iconWidth + '>' break; case "阵雨": return '<img src="' + url + '03.png" width=' + iconWidth + '>' break; case "雷阵雨": return '<img src="' + url + '04.png" width=' + iconWidth + '>' break; case "雷阵雨并伴有冰雹": return '<img src="' + url + '05.png" width=' + iconWidth + '>' break; case "雨夹雪": return '<img src="' + url + '06.png" width=' + iconWidth + '>' break; case "小雨": return '<img src="' + url + '07.png" width=' + iconWidth + '>' break; case "中雨": return '<img src="' + url + '08.png" width=' + iconWidth + '>' break; case "大雨": return '<img src="' + url + '09.png" width=' + iconWidth + '>' break; case "暴雨": return '<img src="' + url + '10.png" width=' + iconWidth + '>' break; case "大暴雨": return '<img src="' + url + '11.png" width=' + iconWidth + '>' break; case "特大暴雨": return '<img src="' + url + '12.png" width=' + iconWidth + '>' break; case "阵雪": return '<img src="' + url + '13.png" width=' + iconWidth + '>' break; case "小雪": return '<img src="' + url + '14.png" width=' + iconWidth + '>' break; case "中雪": return '<img src="' + url + '15.png" width=' + iconWidth + '>' break; case "大雪": return '<img src="' + url + '16.png" width=' + iconWidth + '>' break; case "暴雪": return '<img src="' + url + '17.png" width=' + iconWidth + '>' break; case "雾": return '<img src="' + url + '18.png" width=' + iconWidth + '>' break; case "冻雨": return '<img src="' + url + '19.png" width=' + iconWidth + '>' break; case "沙尘暴": return '<img src="' + url + '20.png" width=' + iconWidth + '>' break; case "霾": return '<img src="' + url + '53.png" width=' + iconWidth + '>' break; case "雨": return '<img src="' + url + '301.png" width=' + iconWidth + '>' break; case "雪": return '<img src="' + url + '302.png" width=' + iconWidth + '>' break; default: return "异常" } }
html代码
<div class="container"> <div class="weather-side"> <div class="weather-gradient"></div> <div class="date-container"> <h2 class="date-dayname"></h2><span class="date-day"></span> <i class="location-icon"></i><span class="location"></span> </div> <div class="weather-container"><i class="weather-icon" id="icon"></i> <h1 class="weather-temp"></h1> <h3 class="weather-desc"></h3> </div> </div> <div class="info-side"> <div class="today-info-container"> <div class="today-info"> <div class="precipitation"><span class="title">风力</span><span class="value" id="daypower"></span> <div class="clear"></div> </div> <div class="humidity"><span class="title">风向</span><span class="value" id="daywind"></span> <div class="clear"></div> </div> <div class="wind"><span class="title">天气现象</span><span class="value" id="dayweather"></span> <div class="clear"></div> </div> </div> </div> <div class="week-container"> <ul class="week-list"> <li><i class="day-icon" id="icon0"></i><span class="day-name" id="week0"></span><span class="day-temp" id="temp0"></span> </li> <li><i class="day-icon" id="icon1"></i><span class="day-name" id="week1"></span><span class="day-temp" id="temp1"></span> </li> <li><i class="day-icon" id="icon2"></i><span class="day-name" id="week2"></span><span class="day-temp" id="temp2"></span> </li> <li><i class="day-icon" id="icon3"></i><span class="day-name" id="week3"></span><span class="day-temp" id="temp3"></span> </li> <div class="clear"></div> </ul> </div> <div class="location-container"> <button class="location-button"><span id="ip"></span></button> </div> </div> </div>
Done！
