简易ajax天气渲染

来源：互联网发布：恐怖童谣案件还原知乎编辑：程序博客网时间：2024/06/05 00:16
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>简易ajax天气渲染</title>        <style>            .con-top{                height: 36px;                line-height: 36px;                text-align: center;            }            .able{                text-align: center;            }            .able>h1{                font-weight: 900;            }            table{                border: 0;                border-collapse: collapse;                position: relative;            }            td,th{                width: 120px;                height: 36px;                line-height: 36px;                text-align: center;                font-family: "微软雅黑";                font-size: 14px;            }            th{                border-bottom: 1px solid #000;            }            tr{                cursor: pointer;            }        </style>        <script src="js/jquery-3.1.1.js"></script>    </head>    <body>        <div class="con-top">            <select name="" id="selor1">                <option value="">请选择</option>            </select>            <select name="" id="selor2">                <option value="">请选择</option>            </select>            <button class="sear">查询</button>        </div>        <div class="able">            <h1>北京城市</h1>            <table align="center">                <thead>                    <tr>                        <th>日期</th>                        <th>风力</th>                        <th>风向</th>                        <th>高温</th>                        <th>低温</th>                        <th>天气类型</th>                    </tr>                </thead>                <tbody></tbody>            </table>        </div>        <script>            $(function(){                //北京                var $start="北京";                ajas($start);                //父级                var area;                $.ajax({                    type:"get",                    url:"json/citys.json",                    async:true,                    data:{},                    dataType:"json",                    success:function(data){                        area=data.citylist;                        $.each(area,function(i,v) {                            $("#selor1").append("<option>"+v.p+"</option>");                        });                    }                });                //子级联动                $("#selor1").change(function(){                    $("#selor2").children("option:not(:first)").remove();                    var $val=$("#selor1").val();                    $.each(area, function(ii,vv) {                        if(vv.p==$val){                            var childs=vv.c;                            $.each(childs,function(item,vals){                                $("#selor2").append("<option>"+vals.n+"</option>");                            })                        }                    });                })                //天气渲染                $(".sear").click(function(){                    var s2=$("#selor2").val();                    $("tbody>tr,.able>div,.able>p,h1").remove();                    ajas(s2);                })                //改变样式                function change(){                    $("tbody>tr:eq(1)").css({background:"blue"});                    $("tbody>tr").hover(function(e){                        $(".able>div").show();                        $(".able>div").css({left:e.clientX+20+"px",top:e.clientY+"px",zIndex:"21"});                    },function(){                        $(".able>div").hide();                    })                }                //ajax封装                function ajas(vs){                    $.ajax({                        type:"get",                        data:{},                        url:"http://wthrcdn.etouch.cn/weather_mini?city="+vs,                        dataType:"json",                        async:"true",                        success:function(data){                            var airs=data;                            if(airs.status==1000){                                //温馨提示                                //console.log(airs.data.ganmao);                                $(".able").prepend("<div style='position:absolute;display:none;background:#ccc;color:#f00;'>"+airs.data.ganmao+"</div>");                                $(".able").prepend("<h2 style=''>"+vs+"最近5天的天气预报"+"</h2>");                                //昨日天气                                $("tbody").append("<tr><td>"+airs.data.yesterday.date+"</td><td>"+airs.data.yesterday.fl+"</td><td>"+airs.data.yesterday.fx+"</td><td>"+airs.data.yesterday.high+"</td><td>"+airs.data.yesterday.low+"</td><td>"+airs.data.yesterday.type+"</td></tr>");                                //预报                                var to=airs.data;                                var str="";                                $.each(to.forecast,function(aa,bb){                                    str="<tr><td>"+bb.date+"</td><td>"+bb.fengli+"</td><td>"+bb.fengxiang+"</td><td>"+bb.high+"</td><td>"+bb.low+"</td><td>"+bb.type+"</td></tr>";                                    $("tbody").append(str);                                })                                change();                            }else{                                $(".able").prepend("<p style='color:red;'>该城市没有最新天气数据</p>");                            }                        }                    });                }            })        </script>    </body></html>
“`
0 0