标签:type html else todayWeather HTML var 天气预报 data 页面
前端HTML页面获取实时天气预报并展示
昨天完成了一个实时显示天气预报的功能,今天在这完记录一下,纯前端layui和JQuery代码。没有后台交互
获取用户打开页面的IP地址进行定位城市。
试了很多方法都大同小异,我在这使用的是http://ip.ws.1 26.net/ipquery链接获取
代码如下
<script src="http://ip.ws.1 26.net/ipquery"></script>
<script type="text/javascript">
dynamicIp(lc);//这是获取天气调用的方法 lc就是城市名称
</script>
在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]+"日<br>"+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<data.data.forecast.length;i++){
var arr = data.data.forecast[i].date.split("日");
var type= data.data.forecast[i].type;
$("#content"+i).html(arr[1]);//日期
if(type=="晴"){
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';
}
}
}
});
}
前台展示 (晴,阴,雨,雪,雷阵雨都是有不同的展示)
标签:type,html,else,todayWeather,HTML,var,天气预报,data,页面 来源: https://blog.csdn.net/weixin_43238452/article/details/115159074
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。