<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>天气API</title> <style> #today1,#yz1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(230, 189, 189); border-top-width: 1px; border-top-style: solid; border-top-color: rgb(230, 189, 189); } /* Padding and font style */ #yz1 td, #yz1 th,#today1 td, #today1 th { padding: 5px 10px; font-size: 12px; font-family: Verdana; color: rgb(177, 106, 104); } /* Alternating background colors */ #yz tr:nth-child(even) { background-color: #D3DFED; } #yz tr:nth-child(odd) { background: #FFF } /* Alternating background colors */ #today tr:nth-child(even) { /*background: rgb(238, 211, 210);*/ background-color: #D3DFED; } #today tr:nth-child(odd) { background: #FFF } </style> </head> <body> <!--<iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tk&skin=yahoo&color=#ff461f" frameborder="0" width="260" height="195" allowtransparency="true"></iframe>--> <h3>天气</h3> <div id="box"></div> <div id="hours"></div> <h2>每3小时天气</h2> <table id="today1" cellspacing="0"> <thead> <tr> <th>时间段</th> <th>温度</th> <th>天气</th> <th>风向</th> <th>风速</th> </tr> </thead> <tbody id="today"></tbody> </table> <br/> <h2>一周天气预报</h2> <table id="yz1" cellspacing="0"> <thead> <tr> <th>日期</th> <th>温度</th> <th>最高气温</th> <th>天气</th> <th>风向</th> <th>风速</th> </tr> </thead> <tbody id="yz"> </tbody> </table> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script> $.ajax({ type: 'GET', url: 'https://www.tianqiapi.com/api/', data: 'version=v1&city=南京', dataType: 'JSON', error: function () { alert('网络错误'); }, success: function (res) { // "tem1":--高温(白天) // "tem2":--低温(晚上) // "tem": --当前温度 console.log(res) $('#box').append('<p>更新时间: ' + res.update_time + '</p>'); $('#box').append('<p>城市: ' + res.city + '</p>'); $('#box').append('<p>天气: ' + res.data[0].wea + '</p>'); $('#box').append('<p>日期: ' + res.data[0].date + '</p>'); $('#box').append('<p>星期: ' + res.data[0].week + '</p>'); $('#box').append('<p>风向: ' + res.data[0].win[0]+'</p>'); $('#box').append('<p>风速: ' + res.data[0].win_speed + '</p>'); $('#box').append('<p>当前温度: ' + res.data[0].tem + '</p>'); $('#box').append('<p>最高温度: ' + res.data[0].tem1 + '</p>'); $('#box').append('<p>最低温度: ' + res.data[0].tem2 + '</p>'); $('#box').append('<p>温馨提示: ' + res.data[0].air_tips + '</p>'); // 遍历数组 var tr1 =''; for (var i = 0; i < res.data[0].hours.length; i++) { tr1+= '<tr><td style="text-align: center">' + res.data[0].hours[i].day + '<td>'+ res.data[0].hours[i].tem + '</td><td>'+ res.data[0].hours[i].wea + '</td><td>'+ res.data[0].hours[i].win + '</td><td>'+ res.data[0].hours[i].win_speed + '</td>'; } $('#today').html(tr1); var tr =''; for (var i = 0; i < res.data.length; i++) { tr+= '<tr><td style="text-align: center">' + res.data[i].day +'('+res.data[i].week +')'+ '<td>'+res.data[i].tem+'</td><td>'+res.data[i].tem1+'</td><td>'+res.data[i].wea+'</td><td>'+res.data[i].win[0]+'</td><td>'+res.data[i].win_speed+'</td>'; } $('#yz').html(tr); } }); pop.iframe({ title: "百度一下你就知道", buttonSpcl: "min|max|close", anim: "fadeIn-zoom", 800, height: 500, id: "random-47801", place: 5, drag: true, dragSize: true, index: true, toClose: false, mask: true, class: false, src: "www.baidu.com" }); </script> </body> </html>
