前端HTML页面获取实时天气预报并展示_html怎样获得天气预报信息

前端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>
1
2
3
4

在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';
                }
            }
        }
    });

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

前台展示 （晴，阴，雨，雪，雷阵雨都是有不同的展示）