| 前端HTML页面获取实时天气预报并展示 | 您所在的位置：网站首页 › 天气网页模板 › 前端HTML页面获取实时天气预报并展示 |
前端HTML页面获取实时天气预报并展示
|
前端HTML页面获取实时天气预报并展示
昨天完成了一个实时显示天气预报的功能，今天在这完记录一下，纯前端layui和JQuery代码。没有后台交互 在js代码块中这样写 代码第三行的链接就是通过城市名称去获取当前城市的天气，获取的包括当天至后面五天，以及昨天的天气。 具体可以在console一下，大家就可以看到返回的有哪些参数。 获取到后我通过JQuery将一些数据赋值到了前台的展示页面。 通过判断天气情况将前台的动态天气进行一一对应。 function dynamicIp(cityName){ $("#ctiyName").html(cityName); var url = encodeURI("http://wthrcdn.etouch.cn/weather_mini?city="+cityName); $.get({ url: url, dataType: "json", async: false, success: function (data) { var todayWeather = data.data.forecast[0]; $("#ganmao").html("穿衣指数:"+data.data.ganmao);//穿衣 var fengli = todayWeather.fengli; $("#fengx").html("风向风力:"+todayWeather.fengxiang+fengli.substring(fengli.indexOf("T")+3,fengli.indexOf("T")+5));//风向 $("#heightwend").html("最"+todayWeather.high);//最高温 $("#low").html("最"+todayWeather.low);//最低温温 $("#wendu").html(data.data.wendu);//当前温度 var arr = todayWeather.date.split("日"); $("#date").html(arr[0]+"日"+arr[1]);//当前日期 var type= todayWeather.type;//天气 if(type=="晴"){ changeWeather(weather[4]); }else if(type=="多云"){ changeWeather(weather[1]); }else if(type=="小雨"){ changeWeather(weather[2]); }else if(type=="雪"){ changeWeather(weather[0]); }else if(type=="雷阵雨"){ changeWeather(weather[3]); } $("#table_next").width($(".details").width()+86); for(var i=1;i document.getElementById('svgDiv'+i).className='sunny'; }else if(type=="多云"){ document.getElementById('svgDiv'+i).className='cloudy'; }else if(type=="小雨"){ document.getElementById('svgDiv'+i).className='rainy'; }else if(type=="雪"){ document.getElementById('svgDiv'+i).className='snowy'; }else if(type=="雷阵雨"){ document.getElementById('svgDiv'+i).className='stormy'; } } } }); }前台展示 （晴，阴，雨，雪，雷阵雨都是有不同的展示） |
获取用户打开页面的IP地址进行定位城市。 试了很多方法都大同小异，我在这使用的是http://ip.ws.126.net/ipquery链接获取 代码如下
【本文地址】
公司简介
联系我们