為自己的網站添加天氣顯示


360API接口模式:
其中的 地區編碼 與中國天氣網的地區編碼是一樣的。如果不設置這個參數,則默認顯示本地的天氣狀況。如重慶地區編碼為101040100,即url引用變成下面代碼

https://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome&code=101040100

地區編碼查詢

以下代碼是一段簡單調用接口的示例,根據里面的參數調整成自己想要的數據格式即可。

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>天氣接口使用示例</title>  
<style>  
body {  
    font-family: microsoft yahei;  
}  
</style>  
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
</head>  
<body>  
  
<div id="output"></div>  
  
<script type="text/javascript" charset="utf-8">  
      
    $.ajax({  
        type: "GET",   
        url: "http://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome",  
        dataType : "jsonp",  
        jsonp: "_jsonp",//參數名  
        success: function(jsonData){  
            var html;  
            html = '數據更新時間:' + jsonData.pubdate + ' ' + jsonData.pubtime + '';  
              
            html += '地區:' + jsonData.area[0][0] + ' ' + jsonData.area[1][0] + ' ' + jsonData.area[2][0] + '';  
            html += '天氣情況:';  
              
            for(var i =0; i<jsonData.weather.length; i++) {  
                html += jsonData.weather[i].date + '';  
                  
                if(jsonData.weather[i].info.dawn !== undefined) {  
                    html += '早晨天氣:' + jsonData.weather[i].info.dawn[1] +   
                    ' 氣溫:' + jsonData.weather[i].info.dawn[0] + '~' + jsonData.weather[i].info.dawn[2] + '' +  
                    jsonData.weather[i].info.dawn[3] +' '+ jsonData.weather[i].info.dawn[4] + '';  
                }  
                  
                if(jsonData.weather[i].info.day !== undefined) {  
                    html += '白天天氣:' + jsonData.weather[i].info.day[1] +   
                    ' 氣溫:' + jsonData.weather[i].info.day[0] + '~' + jsonData.weather[i].info.day[2] + '' +  
                    jsonData.weather[i].info.day[3] +' '+ jsonData.weather[i].info.day[4] + '';  
                }  
                  
                if(jsonData.weather[i].info.night !== undefined) {  
                    html += '夜間天氣:' + jsonData.weather[i].info.night[1] +   
                    ' 氣溫:' + jsonData.weather[i].info.night[0] + '~' + jsonData.weather[i].info.night[2] + '' +  
                    jsonData.weather[i].info.night[3] +' '+ jsonData.weather[i].info.night[4] + '';  
                }  
                html += '';  
            }  
              
            html += '穿衣:';  
            html += '' + jsonData.life.info.chuanyi[0] + '' + jsonData.life.info.chuanyi[1] + '';  
              
            html += '感冒:';  
            html += '' + jsonData.life.info.ganmao[0] + '' + jsonData.life.info.ganmao[1] + '';  
              
            html += '空調:';  
            html += '' + jsonData.life.info.kongtiao[0] + '' + jsonData.life.info.kongtiao[1] + '';  
              
            html += '污染:';  
            html += '' + jsonData.life.info.wuran[0] + '' + jsonData.life.info.wuran[1] + '';  
              
            html += '洗車:';  
            html += '' + jsonData.life.info.xiche[0] + '' + jsonData.life.info.xiche[1] + '';  
              
            html += '運動:';  
            html += '' + jsonData.life.info.yundong[0] + '' + jsonData.life.info.yundong[1] + '';  
              
            html += '紫外線:';  
            html += '' + jsonData.life.info.ziwaixian[0] + '' + jsonData.life.info.ziwaixian[1] + '';  
              
            html += 'PM2.5: ' + jsonData.pm25.pm25[0];  
              
            $("#output").html(html);  
        }  
    });  
</script>  
  
</body>  
</html>  

 更多信息可以查看我的網站:秋風盪


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM