使用nowAPI完成一个html的天气预报小例子

效果如图：

简简单单，废话不多说，上码！

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<!-- 使用百度静态资源库 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引用搜狐的IP地址库 -->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	<title>天气预报</title>
</head>
<body>
<h2>天气预报</h2>
<button id="weather">单击开始预测</button><br/>
<!-- 气象图标 -->
<img src="" id="weatherPic"><br/>
日期：<span id="r1"></span><br/>
星期：<span id="r2"></span><br/>
城市名称：<span id="r3"></span><br/>
今日温度：<span id="r4"></span><br/>
当前温度：<span id="r5"></span><br/>
当前湿度：<span id="r6"></span><br/>
PM2.5：<span id="r7"></span><br/>
天气：<span id="r8"></span><br/>
风向：<span id="r9"></span><br/>
风力：<span id="r10"></span><br/>
当前天气：<span id="r11"></span><br/>
<script type="text/javascript">

/*
	逻辑：使用搜狐IP地址库进行IP定位，将本地IP地址传入请求url进行天气查询，并对返回json解析遍历，操作dom显示
 */


	//DOC   https://www.nowapi.com/api/weather.today		NowAPI官网提供接口
var ky = "";	//注意：此处填入你官网申请下来的key
var sig = "";	//注意：此处填入你官网申请下来的sign
var mip = returnCitySN["cip"];		//获取位置信息
$('#weather').click(function(){
	$.ajax({
        type : 'get',
        async : false,
        url : 'http://api.k780.com/?app=weather.today&weaid='+mip+'&appkey='+ky+'&sign='+sig+'&format=json&jsoncallback=data',
        dataType      : 'jsonp',
        jsonp         : 'callback',
        jsonpCallback : 'data',
        success       : function(data){
            if(data.success!='1'){
            	//没有结果
                alert("结果异常："+data.msgid+' '+data.msg);
                exit;
            }
            //有结果则遍历
            var desc = "";
            for(var i in data.result){
                var property=data.result[i];	//遍历	
                desc += property + ",";	//拼接结果集为带逗号分隔字符串
            }
            //拆分字符串并转换为数组
            var resArr = desc.split(',');
            //进行传值操作
            document.getElementById('r1').innerHTML=resArr[1];	//日期
            document.getElementById('r2').innerHTML=resArr[2];	//星期
            document.getElementById('r3').innerHTML=resArr[4];	//城市名称
            document.getElementById('r4').innerHTML=resArr[6];	//今日温度
            document.getElementById('r5').innerHTML=resArr[7];	//当前温度
            document.getElementById('r6').innerHTML=resArr[8];	//当前湿度
            document.getElementById('r7').innerHTML=resArr[9];	//PM2.5
            document.getElementById('r8').innerHTML=resArr[10];	//天气    	
            document.getElementById('r9').innerHTML=resArr[14];	//风向
            document.getElementById('r10').innerHTML=resArr[15];	//风力

            document.getElementById('r11').innerHTML=resArr[11];	//当前天气
            document.images.weatherPic.src=resArr[12];	//气象图标志url
            // alert(resArr);	//查看总结果集
        },
        error:function(){
            alert('请求失败');
        }
    });
});
</script>
</body>
</html>

原理是：定位当前所在网络的ip地址，然后拼接进天气预报接口请求url，发送请求后收到返回结果，结果如下：

然后解析就可以了！

注意：这里没有提供api，亲可以自己去官网注册一个~下面这个。

里面有很多接口，大家可以试着弄弄~

使用nowAPI完成一个html的天气预报小例子

猜你喜欢