沭阳网前端AJAX实时天气预报系统

先看演示：https://www.shuyanghao.cn/

天气资源来自腾讯天气

上面值分别是：地区，星期，天气情况，空气PM2.5， 天气图标，温度

使用方法：

因为这个是基于jquery的，所以要先引入jquery.js

然后引入：

https://statics.shuyanghao.cn/statics/js/weatherNew_1.0.js

文件解释：此文件为地区编码和天气状况和图标存放和框架的文件

其次引入腾讯天气接口文件：

http://weather.gtimg.cn/qqindex/01011707.js

后面的01011707.js里的数字为你所属地区的编码，相关编码到腾讯天气查询

查询方法：打开https://statics.shuyanghao.cn/statics/js/weather/wtData_v2.js 搜索你的地区，后面的数字就是你的地区编码

然后添加如下JS:

<script type="text/javascript">
    var nowTime = new Date(),
        nowYear = nowTime.getFullYear(),
        nowMonth = nowTime.getMonth()+1,
        nowDate = nowTime.getDate(),
        nowTimeDay = nowTime.getDay(),
        nowTimeHour = nowTime.getHours(),
        tsTime = nowYear + '-' + nowMonth + '-' + nowDate,
        weeks = ['周日','周一','周二','周三','周四','周五','周六'],
        nowTimeWeek = weeks[nowTimeDay];
        edi=weatherMap.weatherIcon[__weather_qqindex.wt].txt;
        if(nowTimeHour<20&&nowTimeHour>4){
            var n=weatherMap.weatherIcon[__weather_qqindex.wt].day;
        } else{
            var n=weatherMap.weatherIcon[__weather_qqindex.wt].night;
        }
        $('#weatherIcon').attr('style','background:url('+n+') center center no-repeat');
        $('#tem').html(__weather_qqindex.tp+'℃');
        $('#weather_out').attr("title",''+edi+'');
        $('#weather-week').html(nowTimeWeek);
        $('#weatherText').html(weatherMap.weatherIcon[__weather_qqindex.wt].txt);
        $.ajax({
            url: "http://weather.gtimg.cn/aqi/cityrank.json",
            dataType: "jsonp",
            jsonpCallback: "cityrank",
            success: function(data) {
              for(var i = 0, len = data.length;i < len; i ++){
                if(data[i].id == "01011707"){
                  $('#weather-quality').html("空气:" + data[i].quality);
                  $('#weather-pm').html("PM2.5:" + data[i].pm2_5);
                }
              }
            }
        });
</script>

然后在你想要显示天气信息的地方加入：

<div id="weather_out" class="weather" title="沭阳天气">沭阳 <span id="weather-week"></span>
 <span id="weatherText"></span>
 <span id="weather-quality"></span>
 <span id="weather-pm"></span>
 <span id="weatherIcon"></span>
 <span id="tem"></span>
</div>

然后就OK啦
PS:文中所说文件请自行下载到本地，包括JS和里面的天气图标.2020年更新：腾讯已经不再维护此接口，已换别的方法