分享一个小案例：利用js和HTML编写的天气情况查询

最新推荐文章于 2024-04-20 11:50:28 发布

didiplus

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量1.6k

点赞数 2

分类专栏：前端文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/sinat_28521487/article/details/105482282

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

先来看看最终的效果吧！
weather

源码

HTML页面源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>weater</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
    <div class="container">
        <!--左边部分-->
        <div class="weather-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-3-24</span>
                <span class="iconfont" id="location">北京</span>
            </div>
            <div class="weather-conteiner">
                <!--天气图标-->
                <span class="iconfont" id="weather-1"></span>
                <div class="weather-temp" id="weather-temp">25℃</div>
                <div class="weather-desc" id="weather-desc">晴天</div>
            </div>
            
        </div>
        <!--右边部分-->
        <div class="info-side">
            <div class="today-info-container">
                <div class="today-info">
                    <!--PM2.5-->
                    <div class="pm clear ">
                        <span class="title">PM2.5</span>
                        <span class="value" id="pm">00</span>
                    </div>
                     <!--湿度-->
                     <div class="humidity clear">
                        <span class="title">湿度</span>
                        <span class="value" id="humidity">00</span>
                    </div> 
                     <!--风速-->
                     <div class="humidity clear">
                        <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="date-dayname">星期二</span>
                        <span class="day-temp" >25℃</span>
                    </li>
                    <li  id="day2">
                        <span class="iconfont"></span>
                        <span class="date-dayname">星期三</span>
                        <span class="day-temp">25℃</span>
                    </li>
                    <li  id="day3">
                        <span class="iconfont"></span>
                        <span class="date-dayname">星期四</span>
                        <span class="day-temp">25℃</span>
                    </li>                    
                    <li  id="day4">
                        <span class="iconfont"></span>
                        <span class="date-dayname">星期五</span>
                        <span class="day-temp">25℃</span>
                    </li>                    
                </ul>
            </div>
            <div class="location-container">
                <input type="text" placeholder="位置" name="" id="city">
                <button class="location-button" id="location-button">
                    <span>查询</span>
                </button>
            </div>
        </div>
    </div>
</body>
<script src="./js/index.js"></script>
</html>

CSS样式表

@font-face {
    font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff2') format('woff2'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  

* {
    margin: 0;
    padding:0;
}

ul {
    list-style: none;
}

/*清除浮动*/
.clear::after {
    content: '';
    display: block;
    clear: both;
}

body {
    width: 100%;
    height: 100vh;
    background-color: #424242;
    display: flex;
    align-self: center;
    justify-content: center;
}

.container {
    margin-top: 10px;
    width: 750px;
    height: 435px;
    background-color: #222831;
    border-radius: 25px;
    box-shadow: 0 0 70px -10px rgba(0,0,0, 0.2);
    color:#fff
}

.weather-side {
    position: relative;
    width: 300px;
    height: 100%;
    border-radius: 25px 0 0 25px;
    box-shadow: 0 0 35px -10px rgba(0, 0, 0, 0.2);
    float: left;

}

.gradient {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(135deg, #72EDF1 10%, #5151E6 100%);
    opacity: 0.8;
    position: absolute;
}
.date-container {
    position: absolute;
    top: 25px;
    left: 25px;
}

.date-container .date-day {
    display: block;
    margin-top: 4px;
}

.weather-conteiner {
    position: absolute;
    bottom: 25px;
    left: 25px;
}

#weather-1 {
    font-size: 70px;
}
.weather-temp {
    font-size: 4em;
    font-weight: bold;
}
.weather-desc {
    font-size: 20px;
}

.info-side {
    /* background: red; */
    float: right;
    padding-top: 25px;
    margin-right: 10px;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.today-info {
    /* background-color: #5151E6; */
    padding: 15px 15px 0 15px;
    margin: 0 25px 25px 25px;
    box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
}
.today-info div {
    margin-bottom: 10px;
}

.today-info .title {
    float: left;
}
.today-info .value {
    float: right;
}

.week-list {
    margin: 10px 35px;
    border-radius: 10px;
    box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.4);

}

.week-list li {
    float: left;
    /* background-color: red; */
    padding: 15px;
    cursor: pointer;
    border-radius: 10px;
    text-align: center;
    transition: 200ms;
    z-index: 100;

}

.week-list li span {
    display: block;
}
.week-list .iconfont {
    font-size: 36px;
}

.week-list li:hover {
    transform: scale(1.1);
    background-color: #ffffff;
    color: #222831;
}
.active {
    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; */
}

.location-container input {
    outline: none;
    width: 300px;
    height: 28px;
    padding: 6px;
    display: block;
    box-sizing: border-box;
    position: absolute;
    bottom: -135px;
    left: calc(50%-150px);
    border: none;
    color: #222831;
    border-radius: 5px;
}

.location-container button {
    outline: none;
    width: 320px;
    padding: 8px;
    box-sizing: border-box;
    border: none;
    color: #ffffff;
    background-image: linear-gradient(135deg, #72EDF1 10%, #5151E6 100%);
    border-radius: 25px;
    font-weight: bold;
    box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: 200ms;
    position: absolute;
    bottom: -195px;
    left: calc(50% - 160px);

}

.location-container button:hover {
    transform: scale(1.05);
}

JS脚本源码

function getweather(city){
    $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        async: false,
        url: 'http://api.asilu.com/weather/?callback=getname&city='+city,
        success:function(data){
          weather(data)
        }
    })
}    

function weather(data){
    console.log(data)
    $("#date-day")[0].innerHTML = data.date
    $("#date-dayname")[0].innerHTML = data.weather[0].date.slice(0,3)
    $("#pm")[0].innerHTML = data.pm25
    $("#humidity")[0].innerHTML = "暂无"
    $("#wind")[0].innerHTML = data.weather[0].wind
    $("#location")[0].innerHTML = data.city
    $("#weather-temp")[0].innerHTML = data.weather[0].temp.slice(0,3) + "℃";
    $("#weather-desc")[0].innerHTML = data.weather[0].weather
    $("#weather-1")[0].innerHTML = weatherIcon(data,1);

    var day1 = $("#day1")
    var span1 =$(day1).find('span') 
    var day2 = $("#day2")
    var span2 =$(day2).find('span') 
    var day3 = $("#day3")
    var span3 =$(day3).find('span') 
    var day4 = $("#day4")
    var span4 =$(day4).find('span')  
    
    span1[0].innerHTML = weatherIcon(data,1);
    span1[1].innerHTML = data.weather[0].date.slice(0,3);
    span1[2].innerHTML = data.weather[0].temp;
    
    span2[0].innerHTML = weatherIcon(data,2);
    span2[1].innerHTML = data.weather[1].date
    span2[2].innerHTML = data.weather[1].temp;

    span3[0].innerHTML = weatherIcon(data,3);
    span3[1].innerHTML = data.weather[2].date
    span3[2].innerHTML = data.weather[2].temp;

    span4[0].innerHTML = weatherIcon(data,4);
    span4[1].innerHTML = data.weather[3].date
    span4[2].innerHTML = data.weather[3].temp;

}
function weatherIcon(data,t) {

    if (data.weather[t - 1].icon1.search("yin") != -1) {
        return "&#xe608;";
    }
    if(data.weather[t - 1].icon1.search("duoyun") != -1){
            return "&#xe607;";
        }
    if(data.weather[t - 1].icon1.search("qing") != -1){
            return "&#xe600;";
    }
    if(data.weather[t - 1].icon1.search("xiaoyu") != -1){
            return "&#xe626;";
    }
    if(data.weather[t - 1].icon1.search("zhongyu") != -1){
            return "&#xe667;";
    }
    if(data.weather[t - 1].icon1.search("dayu") != -1 || data.weather[0].icon1.search("baoyu") != -1){
            return "&#xe610;";
    }
    if(data.weather[t - 1].icon1.search("zhenyu") != -1){
            return "&#xe701;";
    }    
}

$("#location-button").click(function(){
    var city=$("#city").val()
    getweather(city)
})

window.onload = function() {
    this.getweather('北京')
}