原生JS+JSON 天气预报小项目（含源码）

灰太狼 2023-02-15 15:59 10阅读 0赞

## 源码 ##

[源码链接][Link 1]

--------------------

index.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>天气预报</title>
        <link rel="stylesheet" href="css/index.css">
        <script src="js/index.js"></script>
    </head>
    
    
    <body>
    
        <div class="container">
            
            <div class="left-side">
                
                <div class="gradient"></div>
                <div class="date-container">
                    <h2 class="date-dayname" id="date-dayname">周六</h2>
                    <span class="date-day" id="date-day">2020-06-06</span>
                    
                    <span class="iconfont" id="location">开封</span>
                </div>
    
                <div class="weather-conteiner">
                    
                    <span class="iconfont" id="weather-l"></span>
                    <div class="weather-temp" id="weather-temp">30℃</div>
                    <div class="weather-desc" id="weather-desc">晴天</div>
                </div>
            </div>
    
            
            <div class="right-side">
                <div class="today-info-container">
                    <div class="today-info">
                        
                        <div class="pm clearfix ">
                            <span class="title">PM2.5</span>
                            <span class="value" id="pm">00</span>
                        </div>
                        
                        <div class="humidity clearfix a">
                            <span class="title">湿度</span>
                            <span class="value" id="humidity">00</span>
                        </div>
                        
                        <div class="wind clearfix ">
                            <span class="title">风速</span>
                            <span class="value" id="wind">00</span>
                        </div>
                    </div>
                </div>
    
                <div class="week-container">
                    <ul class="week-list">
                        <li class="active" id="day1">
                            
                            <span class="iconfont"></span>
                            <span class="day-name">周六</span>
                            <span class="day-temp">30℃</span>
                        </li>
                        <li id="day2">
                            
                            <span class="iconfont"></span>
                            <span class="day-name">周日</span>
                            <span class="day-temp">30℃</span>
                        </li>
                        <li id="day3">
                            
                            <span class="iconfont"></span>
                            <span class="day-name">周一</span>
                            <span class="day-temp">30℃</span>
                        </li>
                        <li id="day4">
                            
                            <span class="iconfont"></span>
                            <span class="day-name">周二</span>
                            <span class="day-temp">30℃</span>
                        </li>
                    </ul>
                </div>
    
    
                <div class="location-container">
                    <input type="text" id="city" placeholder="位置">
                    <button class="location-button" id="location-button">
                        
                        <span class="iconfont" >查询</span>
                    </button>
                </div>
            </div>
        </div>
    
    
    </body>
    
    </html>

inded.css

@font-face { 
        font-family: 'iconfont';
        /* project id 1866935 */
        src: url('//at.alicdn.com/t/font_1866935_jaopflkhzf.eot');
        src: url('//at.alicdn.com/t/font_1866935_jaopflkhzf.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1866935_jaopflkhzf.woff2') format('woff2'), url('//at.alicdn.com/t/font_1866935_jaopflkhzf.woff') format('woff'), url('//at.alicdn.com/t/font_1866935_jaopflkhzf.ttf') format('truetype'), url('//at.alicdn.com/t/font_1866935_jaopflkhzf.svg#iconfont') format('svg');
    }
    
    .iconfont { 
        font-family: "iconfont"!important;
        font-size: 16px;
        font-style: normal;
    }
    
    
    /* 清除默认样式 */
    
    * { 
        margin: 0px;
        padding: 0px;
    }
    
    ul { 
        list-style: none;
    }
    
    
    /* 高度塌陷问题 */
    
    .clearfix::after, .clearfix::before { 
        content: "";
        display: table;
        clear: both;
    }
    
    body { 
        width: 100%;
        height: 100vh;
        background-color: #424242;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .container { 
        height: 435px;
        width: 740px;
        background-color: #1F252D;
        color: #ffffff;
        border-radius: 25px;
        box-shadow: 0 70px -10px rgba(0, 0, 0, 0.2);
    }
    
    .left-side { 
        position: relative;
        width: 300px;
        height: 100%;
        /* background-color: red; */
        border-radius: 25px 0 0 25px;
        box-shadow: 0 35px -10px rgba(0, 0, 0, 0.2);
        float: left
    }
    
    .gradient { 
        width: 100%;
        height: 100%;
        /* background-color: red; */
        position: absolute;
        background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
        border-radius: 25px 0 0 25px;
        opacity: 0.8;
    }
    
    .date-container { 
        position: absolute;
        top: 25px;
        left: 25px;
    }
    
    .date-container .date-dayname { 
        display: block;
        margin-top: 4px;
    }
    
    #location { 
        display: block;
        margin-top: 4px;
    }
    
    .weather-conteiner { 
        position: absolute;
        bottom: 25px;
        left: 25px;
    }
    
    #weather-l { 
        font-size: 70px;
    }
    
    .weather-temp { 
        font-size: 4em;
        font-weight: bold;
    }
    
    .weather-desc { 
        font-size: 20px;
    }
    
    
    /* 右边部分 */
    
    .right-side { 
        float: right;
        /* background-color: red; */
        padding-top: 25px;
        margin-right: 10px;
        height: 100%;
        box-sizing: border-box;
        position: relative;
    }
    
    .today-info { 
        /* background-color: royalblue; */
        padding: 15px 15px 0 15px;
        margin: 0 25px 25px 25px;
        box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }
    
    .today-info div { 
        border-bottom: 10px;
    }
    
    .today-info .a { 
        margin: 6px 0px;
    }
    
    .today-info .title { 
        float: left;
    }
    
    .today-info .value { 
        float: right;
    }
    
    .week-list { 
        margin: 10px 35px;
        border-radius: 10px;
        box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3);
    }
    
    .week-list li { 
        float: left;
        /* background-color: red; */
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        cursor: pointer;
        transition: 200ms;
    }
    
    .week-list li span { 
        display: block;
    }
    
    .week-list { 
        position: relative;
        z-index: 99999;
    }
    
    .week-list li:hover { 
        transform: scale(1.1);
        background-color: #ffffff;
        color: #222831;
    }
    
    .week-list .iconfont { 
        font-size: 37px;
    }
    
    .active { 
        transform: scale(1.1);
        background-color: #ffffff;
        color: #222831;
    }
    
    .week-list .day-name { 
        margin-top: 10px;
        text-align: center;
    }
    
    .week-list .day-temp { 
        margin-top: 10px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
    }
    
    .location-container { 
        padding: 25px 35px;
        position: relative;
        /* background-color: red; */
        width: 330px;
        height: 126px;
    }
    
    .location-container input { 
        outline: none;
        width: 300px;
        height: 28px;
        padding: 6px;
        display: block;
        box-sizing: border-box;
        /* font-weight: bold; */
        position: absolute;
        bottom: -15px;
        left: calc(50% - 150px);
        border: none;
        border-radius: 5px;
        color: #222831;
    }
    
    .location-container button { 
        outline: none;
        width: 320px;
        /* height: 28px; */
        padding: 8px;
        box-sizing: border-box;
        border-radius: 25px;
        border: none;
        color: #FFFFFF;
        /* font-size: 18px; */
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0px 50px -5px rgba(0, 0, 0, 0.3);
        background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
        transition: 200ms;
        position: absolute;
        bottom: -80px;
        left: calc(50% - 160px);
    }
    
    .location-container button:hover { 
        transform: scale(1.05);
    }

index.js

// 接口返回的数据就是一个函数的调用
    function weather(data) { 
    
        var dateDayname = document.getElementById("date-dayname");
        var dateDay = document.getElementById("date-day");
        var location = document.getElementById("location");
    
        var weatherL = document.getElementById("weather-l")
        var weatherTemp = document.getElementById("weather-temp")
        var weatherDesc = document.getElementById("weather-desc")
    
        var pm = document.getElementById("pm")
        var humidity = document.getElementById("humidity")
        var wind = document.getElementById("wind")
    
    
        var day1 = document.getElementById("day1");
        var span1 = day1.getElementsByTagName("span");
    
        var day2 = document.getElementById("day2");
        var span2 = day2.getElementsByTagName("span");
    
        var day3 = document.getElementById("day3");
        var span3 = day3.getElementsByTagName("span");
    
        var day4 = document.getElementById("day4");
        var span4 = day4.getElementsByTagName("span");
    
        dateDayname.innerHTML = data.weather[0].date.slice(0, 3);
        dateDay.innerHTML = data.date;
        location.innerHTML = data.city;
    
        weatherL.innerHTML = weatherIcon(1);
        weatherTemp.innerHTML = data.weather[0].temp.slice(0, 3) + "℃";
        weatherDesc.innerHTML = data.weather[0].weather;
    
        //判断是否有pm25
        if (data.pm25) { 
            pm.innerHTML = data.pm25;
        } else { 
            pm.innerHTML = "暂无";
        }
    
        humidity.innerHTML = "暂无";
        wind.innerHTML = data.weather[0].wind;
        // 封装判断天气的一个函数
        // t 第几天
        function weatherIcon(t) { 
            if (data.weather[t - 1].icon1.search("duoyun") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("yin") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("qing") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("xiaoyu") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("zhongyu") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("dayu") != -1 || data.weather[0].icon1.search("baoyu") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("leizhenyu") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("zhenyu") != -1) { 
                return "";
            }
    
            if (data.weather[t - 1].icon1.search("zhongxue") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("zhongxuezhuandaxue") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("zhenxue") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("yangsha") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("xiaoxue") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("xiaoxuezhuanzhongxue") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("mai") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("shachenbao") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("fuchen") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("daxue") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("daxuezhuanbaoxue") != -1) { 
                return "";
            }
            if (data.weather[t - 1].icon1.search("baoxue") != -1) { 
                return "";
            }
    
        }
    
        span1[0].innerHTML = weatherIcon(1);
        span1[1].innerHTML = data.weather[0].date.slice(0, 3);
        span1[2].innerHTML = data.weather[0].temp;
    
        span2[0].innerHTML = weatherIcon(2);
        span2[1].innerHTML = data.weather[1].date.slice(0, 3);
        span2[2].innerHTML = data.weather[1].temp;
    
        span3[0].innerHTML = weatherIcon(3);
        span3[1].innerHTML = data.weather[2].date.slice(0, 3);
        span3[2].innerHTML = data.weather[2].temp;
    
        span4[0].innerHTML = weatherIcon(4);
        span4[1].innerHTML = data.weather[3].date.slice(0, 3);
        span4[2].innerHTML = data.weather[3].temp;
    
    
    
    
    }
    
    window.onload = function() { 
    
        var btn = document.getElementById("location-button");
        var city = document.getElementById("city");
    
        var oldScript = document.createElement("script");
        oldScript.src = `https://api.asilu.com/weather/?city=${ "开封"}&callback=weather`;
        //插入到页面中去
        document.body.appendChild(oldScript);
    
        btn.onclick = function() { 
            // 加个简单判断，输入内容是否为空
            if (city.value) { 
                var newScript = document.createElement("script");
                newScript.src = `https://api.asilu.com/weather/?city=${ city.value}&callback=weather`;
    
                //插入到页面中去
                document.body.replaceChild(newScript, oldScript);
                oldScript = newScript;
            } else { 
                alert("请输入城市名称!");
            }
        }
    }

没事可以来看看，万一有收获呢。

[个人博客地址https://aqingya.cn][https_aqingya.cn]  
  
  
愿你的坚持终有回报。

[Link 1]: https://github.com/wuzhiguang1/aqingProject/tree/master/JS+JSON+Weather
[https_aqingya.cn]: https://aqingya.cn