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

最新推荐文章于 2024-05-24 10:49:57 发布

阿清呀.

最新推荐文章于 2024-05-24 10:49:57 发布

阅读量613

点赞数

分类专栏：项目文章标签： js json

本文链接：https://blog.csdn.net/wzg0817/article/details/106589042

版权

项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

源码

源码链接

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>
                <!-- location 图标 -->
                <span class="iconfont" id="location">&#xe6e5;开封</span>
            </div>

            <div class="weather-conteiner">
                <!-- 天气图标 -->
                <span class="iconfont" id="weather-l">&#xe61f;</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">
                    <!-- PM2.5 -->
                    <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">&#xe61f;</span>
                        <span class="day-name">周六</span>
                        <span class="day-temp">30℃</span>
                    </li>
                    <li id="day2">
                        <!-- 天气图标 -->
                        <span class="iconfont">&#xe61f;</span>
                        <span class="day-name">周日</span>
                        <span class="day-temp">30℃</span>
                    </li>
                    <li id="day3">
                        <!-- 天气图标 -->
                        <span class="iconfont">&#xe61f;</span>
                        <span class="day-name">周一</span>
                        <span class="day-temp">30℃</span>
                    </li>
                    <li id="day4">
                        <!-- 天气图标 -->
                        <span class="iconfont">&#xe61f;</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">
                    <!-- location图标 -->
                    <span class="iconfont" >&#xe6e5;查询</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 "&#xe694;";
        }
        if (data.weather[t - 1].icon1.search("yin") != -1) {
            return "&#xe624;";
        }
        if (data.weather[t - 1].icon1.search("qing") != -1) {
            return "&#xe61f;";
        }
        if (data.weather[t - 1].icon1.search("xiaoyu") != -1) {
            return "&#xe622;";
        }
        if (data.weather[t - 1].icon1.search("zhongyu") != -1) {
            return "&#xe685;";
        }
        if (data.weather[t - 1].icon1.search("dayu") != -1 || data.weather[0].icon1.search("baoyu") != -1) {
            return "&#xe644;";
        }
        if (data.weather[t - 1].icon1.search("leizhenyu") != -1) {
            return "&#xe61e;";
        }
        if (data.weather[t - 1].icon1.search("zhenyu") != -1) {
            return "&#xe643;";
        }

        if (data.weather[t - 1].icon1.search("zhongxue") != -1) {
            return "&#xe684;";
        }
        if (data.weather[t - 1].icon1.search("zhongxuezhuandaxue") != -1) {
            return "&#xe686;";
        }
        if (data.weather[t - 1].icon1.search("zhenxue") != -1) {
            return "&#xe683;";
        }
        if (data.weather[t - 1].icon1.search("yangsha") != -1) {
            return "&#xe680;";
        }
        if (data.weather[t - 1].icon1.search("xiaoxue") != -1) {
            return "&#xe681;";
        }
        if (data.weather[t - 1].icon1.search("xiaoxuezhuanzhongxue") != -1) {
            return "&#xe67d;";
        }
        if (data.weather[t - 1].icon1.search("mai") != -1) {
            return "&#xe67e;";
        }
        if (data.weather[t - 1].icon1.search("shachenbao") != -1) {
            return "&#xe67b;";
        }
        if (data.weather[t - 1].icon1.search("fuchen") != -1) {
            return "&#xe67a;";
        }
        if (data.weather[t - 1].icon1.search("daxue") != -1) {
            return "&#xe675;";
        }
        if (data.weather[t - 1].icon1.search("daxuezhuanbaoxue") != -1) {
            return "&#xe676;";
        }
        if (data.weather[t - 1].icon1.search("baoxue") != -1) {
            return "&#xe674;";
        }

    }

    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

愿你的坚持终有回报。

阿清呀.

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生JS+JSON 天气预报小项目（含源码）

源码源码链接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="styleshee
复制链接

扫一扫