天气预报部分

程序员文章站 2022-05-29 21:38:11

...

一、代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端天气预报 api</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="map">
        <div class="data_map">
            <iframe src="./sky.html" class="datalist"></iframe>
        </div>
        <div class="footer">
            <ul>
                <li>首页</li>
                <li>热点</li>
                <li>我的</li>
            </ul>
        </div>
    </div>
    <script src="./js/jquery-1.9.1.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>

sky.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气预报框架</title>
    <link rel="stylesheet" href="./css/sky.css">
</head>
<body>
    <div class="address">
        请选择你的城市： <span>西安市</span>
    </div>

    <div class="today">
        <div class="week"></div>
        <div class="day">天气</div>
        <div class="wether">
            当前温度：<span>温度</span>℃
        </div>
    </div> 

    <div class="par">
        <div class="maxw">
            <div class="trans">
                <div class="wind">

                </div>
                <div class="wind">

                </div>
            </div>
        </div>
    </div>

    <div class="gloab">
        <ul>
            <li>今天天气</li>
            <li>未来天气</li>
            <li>推荐指数</li>
            <li>空气质量</li>
        </ul>
    </div>
    <div class="detail">
        <div>
            <div class="todaywether"></div>
        </div>
        <div>
            <div class="afterwether"></div>
        </div>
        <div>
            <div class="command"></div>
        </div>
        <div>
            <div class="wetherquality">
                <p>空气质量：</p>
                <div>
                    AQI指数:<span class="x_1"></span><br/>
                    PM10指数:<span class="x_2"></span><br/>
                    PM2.5指数:<span class="x_3"></span><br/>
                    空气质量:<span class="x_4"></span><br/>
                    建议：<br/>
    
                    <div class="x_5"></div>
                    <div class="x_6"></div>
                    <div class="x_7"></div> 
                </div>
            </div>
        </div>
    </div>

    <script src="./js/jquery-1.9.1.js"></script>
    <script>
    $(function (){
        $.ajax({
            method:"post",
            url:"https://api.jisuapi.com/weather/query",
            // https://api.jisuapi.com/weather/query?appkey=e5786bd589492e99&city=西安  cb是啥
            data:{appkey:"e5786bd589492e99",city:"西安市",cb:"getData"},
            dataType:"jsonp",
            jsonpCallback:"getData",
            success:function (res){
                console.log(res);
                if(res.status=="202"&&res.msg=="城市不存在"){
                    alert("where are you?");
                    return;
                }
                var data=res.result;
                console.log(data);
                $(".day").html(data.weather);
                $(".wether").find("span").html(data.temp);
                $(".today").css("backgroundImage","url(./img/晴天.jpg)").css("backgroundSize","100% 100%");
                $(".week").html(data.week);
                $(".wind").html("最高温度："+data.temphigh+"℃、最低温度："+data.templow+"℃、风向："+data.winddirect+"、风力："+data.windpower+"、风速："+data.windspeed+"m/s");
                $(".maxw").width($(".wind").outerWidth()*2);
                for(var i=0;i<data.index.length;i++){
                    var d=$("<div></div>");
                    var str=$("<span></span>");
                    str.html(data.index[i].iname+":");
                    var str1=$("<span></span>");
                    str1.html(data.index[i].ivalue);
                    var str2=$("<span></span>");
                    str2.html(data.index[i].detail);
                    d.append(str);
                    d.append(str1);
                    d.append(str2);
                    $(".command").append(d);
                }
                $(".x_1").html(data.aqi.aqi);
                $(".x_2").html(data.aqi.ipm10);
                $(".x_3").html(data.aqi.ipm2_5);
                $(".x_4").html(data.aqi.quality);
                $(".x_5").html(data.aqi.aqiinfo.affect);
                $(".x_6").html(data.aqi.aqiinfo.level);
                $(".x_7").html(data.aqi.aqiinfo.measure);

                for (var i = 0; i < data.hourly.length; i++) {
                    var d = $("<div></div>");
                    var str = $("<span></span>");
                    str.html(data.hourly[i].time + "-----");
                    var str1 = $("<span></span>");
                    str1.html(data.hourly[i].weather + "-----");
                    var str2 = $("<span></span>");
                    str2.html(data.hourly[i].temp + "℃");
                    d.append(str);
                    d.append(str1);
                    d.append(str2);
                    $(".todaywether").append(d);
                }

                for (var i = 0; i < data.daily.length; i++) {
                    var d = $("<div></div>");
                    var str = $("<span></span>");
                    str.html(data.daily[i].date + "--");
                    var str1 = $("<span></span>");
                    str1.html(data.daily[i].week + ":");
                    var str2 = $("<div></div>");
                    str2.html("白天--" + data.daily[i].day.temphigh + "℃、" + data.daily[i].day.weather + "、" + data.daily[i].day.winddirect + "、" + data.daily[i].day.windpower);
                    var str3 = $("<div></div>");
                    str3.html("晚上--" + data.daily[i].night.templow + "℃、" + data.daily[i].night.weather + "、" + data.daily[i].night.winddirect + "、" + data.daily[i].night.windpower);
                    d.append(str);
                    d.append(str1);
                    d.append(str2);
                    d.append(str3);
                    $(".afterwether").append(d);
                }
            }
        });
    },function(e){
        alert('Geoloaction error :'+e.message);
    });
    $(".gloab").find("li").each(function (index) {
        $(this).click(function () {
            $(".detail").children().eq(index).show().siblings().hide();
            $(this).addClass("whiteff").siblings().removeClass("whiteff");
        })
    }).eq(0).addClass("whiteff");
    $(".detail").children().eq(0).show();

    </script>
</body>
</html>

index.css

* {
    padding: 0;
    margin: 0;
}

html,body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.map {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
}
.footer {
    position: fixed;
    width: 100%;
    height: 3.6rem;
    background: #ededed;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
}
.footer>ul {
    flex: 1;
    display: flex;
    flex-direction: row;
}
.footer>ul>li {
    flex: 1;
    display: flex;
    /* 文本垂直居中 */
    align-items: center;
    justify-content: center;
}
.footerselect {
    background: #14e6ff;
    color: #fff;
}

.data_map {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
}
.datalist {
    width: 100%;
    height: 100%;
    border-style: none;
}

sky.css

* {
    padding: 0;
    margin: 0;
}
html,body {
    width: 100%;
    height: 100%;
    background-color: rgb(144,235,255);
    overflow-x: hidden;
}
.address {
    font-size: 0.9rem;
    padding: 1rem 2rem;
    background: #ececec;
}
.today {
    text-align: center;
    padding: 2.5rem 0;
    background: #fff;
    background-position: center;
    background-size: 60%;
    background-repeat: no-repeat;
} 
.today>div {
    margin: 1rem 0;
}
.maxw {
    overflow: hidden;
}
.wind {
    float: left;
    font-size: 0.8rem;
    padding: 0.5rem;
    white-space: nowrap;
    box-sizing: border-box;
}
.trans {
    animation: animate 6s linear infinite;
}

@keyframes animate {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: -50%;
    }
}

.gloab {
    display: flex;
    flex-direction: row;
    height: 3rem;
    border-bottom: 1px solid rgba(0, 106, 155, 0.86);
    background: rgba(0, 173, 255, 0.86);
}

.gloab > ul {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.gloab > ul > li {
    list-style: none;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail {
    position: relative;
    left: 0;
    top: 0;
}

.detail > div {
    position: absolute;
    display: none;
    width: 100%;
    height: auto;
    background: rgb(144, 235, 255);
}
.whiteff {
    background: #fff;
    color: #000;
}
.life{
    margin: 1rem;
    font-size: 1rem;
}
.life > div > span:nth-child(3) {
    display: block;
    margin: 0.5rem 0;
    color: #ff940d;
}
.wetherquality {
    margin: 1rem;
    font-size: 1rem;
}
.todaywether{
    margin: 1rem;
    font-size: 1rem;
}
.todaywether>div{
    margin: 0.5rem 0;
}
.afterwether {
    padding: 1rem;
    font-size: 1rem;
}
.afterwether>div{
    margin: 0.5rem 0;
}

index.js

var Ele_Class="footerselect";
var SCH=$(window).height();
$.fn.selectKa=function(){
    $(this).find("li").eq(0).addClass(Ele_Class);
    $(this).find("li").click(function(){
        $(this).addClass(Ele_Class).siblings().removeClass();

    });
}
        $(function(){
            $(".footer").selectKa();
            $(".datalist").height(SCH-$(".footer").height());
        });

二、效果
天气预报部分

三、注意知识点
1、get post
2、jsonp
3、ajax

上一篇：设计模式-前端控制器模式

下一篇： [php]前端控制器

天气预报部分

第一部分day03-元组、字典、字符串

Web API---课程介绍 + JavaScript分三个部分

Php部分常见问题总结

补充原型的一部分小知识

jQuery的实现原理的模拟代码 -1 核心部分_jquery

CSS只是进化的一部分_html/css_WEB-ITnose

mysql中使用replace替换某字段的部分内容_MySQL

微信小程序实现天气预报功能

php是不是有小数部分为.3是不是有漏洞解决方案

input的type="number"在部分手机端会出现一个小按钮要如何解决?