html 显示天气预报,前端HTML页面获取实时天气预报并展示

前端HTML页面获取实时天气预报并展示

昨天完成了一个实时显示天气预报的功能，今天在这完记录一下，纯前端layui和JQuery代码。没有后台交互

获取用户打开页面的IP地址进行定位城市。

试了很多方法都大同小异，我在这使用的是http://ip.ws.1 26.net/ipquery链接获取

代码如下

dynamicIp(lc);//这是获取天气调用的方法 lc就是城市名称

在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("穿衣指数: