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

最新推荐文章于 2025-03-13 15:16:41 发布

爪哇Bubble

最新推荐文章于 2025-03-13 15:16:41 发布

阅读量1.9w

点赞数 17

分类专栏： Css、Js、前端学习文章标签： jquery html javascript 天气预报

本文链接：https://blog.csdn.net/weixin_43238452/article/details/115159074

版权

Css、Js、前端学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用layui和JQuery纯前端技术实现获取用户IP定位城市，并展示实时天气预报的功能。通过http://ip.ws.126.net/ipquery获取城市信息，然后调用weather_min接口获取天气数据，包括温度、风向、穿衣指数等，并根据天气类型动态更新前端展示。代码中详细展示了数据处理和前端展示的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

昨天完成了一个实时显示天气预报的功能，今天在这完记录一下，纯前端layui和JQuery代码。没有后台交互
在这里插入图片描述
获取用户打开页面的IP地址进行定位城市。
试了很多方法都大同小异，我在这使用的是http://ip.ws.126.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';
                }
            }
        }
    });

}