前端HTML页面获取实时天气预报并展示
昨天完成了一个实时显示天气预报的功能,今天在这完记录一下,纯前端layui和JQuery代码。没有后台交互 获取用户打开页面的IP地址进行定位城市。 试了很多方法都大同小异,我在这使用的是http://ip.ws.126.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("穿衣指数:"+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';
}
}
}
});
}
前台展示 (晴,阴,雨,雪,雷阵雨都是有不同的展示) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210324091551341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzODQ1Mg==,size_16,color_FFFFFF,t_70)
|