一款免费的天气预报 

<!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",
        width: 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>

 

 

 

posted @ 2019-02-25 13:59  现世中的素人  阅读(178)  评论(0)  编辑  收藏  举报