提升成就感！前端开发(半小时完成自己的天气预报！)

最新推荐文章于 2024-07-02 17:28:01 发布

Hola_Charlie

最新推荐文章于 2024-07-02 17:28:01 发布

阅读量550

点赞数 21

本文链接：https://blog.csdn.net/jk0025/article/details/139842909

版权

AJAX 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

AJAX写出属于自己的天气预报

#做完这个项目可以学到什么？

#这个前端项目需要具备什么知识?

1: H5C3的基础代码能力

2:JavaScript的基础语法

3.AJAX的逻辑（可以在之前的博文中查看）

当你掌握这几门技术就可以完成这个简单小项目啦！项目推荐使用VSCode编译哦

以下是我们要完成项目的效果图

项目文档结构如下：

index.js、index.css都是需要自己创建的

首先，我们需要整套的HTML页面代码和CSS代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<div class="author">
   Jack-Charlie的天气预报
</div>
<link rel="stylesheet" href="index.css">
<div class="top-box">
    <div class="title">
<span class="dateShort"></span>
<span class="calendar">&nbsp;
    <span class="dateLunar"></span>
</span>
</div>
<div class="search-box">
<div class="location">
    <span class="area">海口市</span>
</div>
<div class="search">
    <input type="text" placeholder="搜索城市" autocomplete="off" class="search-city">
    <ul class="search-list">
        <li class="city-item"></li>
    </ul>
</div>
</div>
    </div>
<div class="weather-box">
    <div class="tem-box">
<span class="temp">
    <span class="temperature">26</span>
    <span>℃</span>
</span>
</div>
<div class="climate-box">
<div class="air">
    <span class="psPm25">35</span>
    <span class="psPm25Level">优</span>
</div>
<ul class="weather-list">
    <li class="first">
        <img src="https://hmajax.itheima.net/weather/duoyunline.png" alt="" class="weatherImg">
        <span class="weather">多云</span>
    </li>
    <li class="windDirection">东北风</li>
    <li class="windPower">1级</li>
</ul>
</div>
    </div>
<div class="today-weather">
    <div class="range-box">
<span>今天：</span>
<span class="range">
<span class="weather">小雨</span>
<span class="temNight">25</span>
<span>-</span>
<span class="temDay">32</span>
<span>℃</span>
</span>
</div>
<ul class="sun-list">
<li>
    <span>紫外线</span>
    <span class="ultraviolet">中等</span>
</li>
<li>
    <span>湿度</span>
    <span class="humidity">92.0</span>%
</li>
<li>
    <span>日出</span>
    <span class="sunriseTime">05:22</span>
</li>
<li>
    <span>日落</span>
    <span class="sunsetTime">19:12</span>
</li>
</ul>
    </div>
<div class="week-weather-box">
<div class="title">7日内天气预报</div>
<ul class="week-wrap">
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">今天</span>
        <span class="date">07月26日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
    <span class="weather">小雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">32</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">明天</span>
        <span class="date">07月27日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
    <span class="weather">小雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">32</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">后天</span>
        <span class="date">07月28日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/leizhenyu.png" alt="" class="Img">
    <span class="weather">雷阵雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">26</span>~
        <span class="temDay">31</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">周六</span>
        <span class="date">07月29日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
    <span class="weather">小雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">30</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">周日</span>
        <span class="date">07月30日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/zhongyu.png" alt="" class="Img">
    <span class="weather">中雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">30</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">南风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">周一</span>
        <span class="date">07月31日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/zhongyu.png" alt="" class="Img">
    <span class="weather">中雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">31</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东南风</span>
        <span class="windPower">&lt;3-4级</span>
    </div>
</li>
        
        <li class="item">
    <div class="date-box">
        <span class="dateFormat">周二</span>
        <span class="date">08月01日</span>
    </div>
    <div class="data-second">
        <img src="https://hmajax.itheima.net/weather/zhenyu.png" alt="" class="Img">
    <span class="weather">阵雨</span>
        </div>
    <div class="temp-second">
        <span class="temNight">25</span>~
        <span class="temDay">34</span>
        <span>℃</span>
    </div>
    <div class="wind">
        <span class="windDirection">东北风</span>
        <span class="windPower">&lt;&lt;3级</span>
    </div>
</li>
        </ul>

</div>
<script src="index.js">
    
</script>
</html>

接下来，让我们对HTML页面进行修饰，CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #246dde;
    background-image: url(天气预报.jpg);
    background-size: 100%;
}
.top-box {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
}
.dateShort,
.dateLunar,
.calendar {
    color: azure;
}
li:focus {
    background-color: #f0f0f0; /* 选中时的背景颜色 */
    color: #000; /* 选中时的文本颜色 */
    outline: none; /* 去除默认的轮廓线 */
  }
.search-box {
    width: 250px;
    display: flex;
    justify-content: space-between;
    color:white;
}
.author{
    font-size: 20px;
    color: #fff;
}
input {
    width: 180px;
    height: 25px;
    outline: none;
    border: none;
    border-radius: 10px;
    text-indent: 1em;
}
.area {
    cursor: pointer;
}
.weather-box {
    width: 500px;
    display: flex;
    justify-content: space-around;
    margin-left:120px;
}
.temp {
    font-size: 80px;
    color: white;
}
.search-list {
    position: absolute;
    border-radius: 5px;
}
.climate-box {
    width: 150px;
}
.air {
    width: 100px;
    height: 30px;
    color: aliceblue;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    margin-top: 20px;
    background-color: yellowgreen;
}
.weather-list {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    color: aliceblue;
}
li {
    list-style: none;
}
.first {
    display: flex;
    vertical-align: middle;
}
.weatherImg {
    width: 20px;
    height: 20px;
}
.today-weather {
    width: 700px;
    margin-left: 150px;
    display: flex;
    justify-content: space-around;
    color: white;
}
.sun-list {
    width: 450px;
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
}
.week-weather-box {
    width: 1200px;
    height: 400px;
    margin: 20px auto;
    border-radius: 10px;
    background-color: whitesmoke;
}
.title {
    width: 150px;
    font-size: 20px;
    font-weight: 700;
    color: black;
    position: relative;
    top: 10px;
    left: 20px;
}
.week-wrap {
    height: 250px;
    margin: 50px 50px;  
    text-align: center;
    display: flex;
    justify-content: space-between;
}
.date-box {
    display: flex;
    flex-direction: column;
}
.wind {
    font-size: 10px;
}
.data-second {
    width: 100px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.Img {
    width: 30px;
    height: 30px;
    margin-left: 35px;
}
.date {
    font-size: 12px;
    color: gray;
}
.item {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.search-list {
    width: 180px;
    background-color: white;
    color: black;
    margin-top: 5px;
}
.item-city {
    cursor: pointer;
}
.item-city:hover {
    background-color: skyblue;
}

图片素材也可以提供给大家

可以通过index.css 里的background-image进行修改
body:{
background-image:url()
}

接下来，就是今天的重点，完成项目的逻辑操作，也就是js代码，让我们先来学习，最后会把源码提供给大家。

在编写了属于自己的myaxios的方法后，我们就可以在代码中测试了

接下来，我们需要实现搜索模块，如下：

那么，在item里我们需要点击后显示当地的天气，这也是最重要的一步。我们需要给item自定义属性值，比如给它添加data-code="${item.code}",这一步也是动态地为每一个item和自己的城市id进行绑定，我们可以遍历查看每一个li的展示效果，效果如下：

最后一步：将获得的数据回显到相应的模块中。

index.js完整代码

// function getWeather(cityCode){
//     // 1.1 
//     myaxios01({
//         url:'http://hmajax.itheima.net/api/weather',
//         method:'POST',
//         params:{
//             city:cityCode
//         }


//     }).then(result=>{
//         console.log(result);
//     }).catch(error=>{
//         console.log(error);
//     })




// }
// // 北京市城市编码

// getWeather('110100')

// 获取数据和展示数据的逻辑，一般都会使用很多次，因此可以获取数据展示逻辑


function myaxios01(config){
    // 在axios函数调用时，需要集成一个传递查询的功能。params每次调用时不能保证都有。
    // 使用URLSearchParams转换查询字符串
    return new Promise((resolve,reject)=>{
        const xhr = new XMLHttpRequest()
       

        // 1. 做一个判断
        if(config.params){
            // 当config对象中有params

            // 浏览器提供的构造函数
            const paramsObj = new URLSearchParams(config.params)

            // 定义常量，接受字符串
            const queryString =  paramsObj.toString()

            // 将查询参数字符串拼接在问号后面
            config.url+=`?${queryString}`
            
        }
        xhr.open(config.method||'GET',config.url)
        xhr.addEventListener('loadend',()=>{
            if(xhr.status>=200&&xhr.status<300){
                resolve(JSON.parse(xhr.response))
            }else{
                reject(new Error(xhr.response))
            }
        })
        // 判断是否含有请求体
        if(config.data){
            // 处理数据类型

            // 将数据对象转换为JSON字符串
            const jsondata= JSON.stringify(config.data)

            // 请求体内容标记需要自行进行设置，需要携带额外信息，告诉服务器


            // xhr.setRequestHeader('content-type','application/json')

            xhr.setRequestHeader('Content-Type','application/json')

            xhr.send(jsondata)
            // 如果没有请求体数据，正常发送请求
        }else{
        xhr.send()
        }
    })
}

document.querySelector('.search-city').addEventListener('input',(e)=>{
    // 获取关键字，拿到后端接口
    console.log(e.target.value);
    myaxios01({
        url:'http://hmajax.itheima.net/api/weather/city',
        params:{
            city:e.target.value
        }
    }).then(result=>{
        console.log(result);
        
        // 定义一组常量，接受返回到的map集合

       const cityname = result.data.map(item=>{
        return `<li class="city-area" data-code="${item.code}">${item.name}</li>`
       }).join('')
       console.log(cityname);
    document.querySelector('.search-list').innerHTML = cityname
    })

})

// 检测搜索列表点击事件，获取城市code值


function getWeather(cityCode){
    myaxios01({
        url:'http://hmajax.itheima.net/api/weather',
        params:{
// 传递查询参数
            city:cityCode

        }
    }).then(result =>{
// 展示数据到页面上
        const weaData = result.data
        // 将数据嵌入到页面上，将HTML代码复制

        //阳历和农历的日期  
        const dataStr = 
        `<div class="title">
        <span class="dateShort">${result.data.dateShort}</span>
        <span class="calendar">农历</span>
        <span class="dateLunar">${result.data.dateLunar}</span>
        </span>
        </div>`
        const weatherData = 
        `<div class="tem-box">
         <span class="temp">
         <span class="temperature">${weaData.temperature}</span>
        <span>℃</span>
    </span>
    </div>
    <div class="climate-box">
    <div class="air">
        <span class="psPm25">${weaData.psPm25}/span>
        <span class="psPm25Level">${weaData.psPm25Level}</span>
    </div>
    <ul class="weather-list">
        <li class="first">
            <img src="${weaData.weatherImg}" alt="" class="weatherImg">
            <span class="weather">${weaData.weather}</span>
        </li>
        <li class="windDirection">${weaData.windDirection}</li>
        <li class="windPower">${weaData.windPower}</li>
    </ul>
    </div>`
    const towea = weaData.todayWeather
    const toweather = `<div class="today-weather">
    <div class="range-box">
<span>今天：</span>
<span class="range">
<span class="weather">${towea.weather}</span>
<span class="temNight">${towea.temNight}</span>
<span>-</span>
<span class="temDay">${towea.temDay}</span>
<span>℃</span>
</span>
</div>
<ul class="sun-list">
<li>
    <span>紫外线</span>
    <span class="ultraviolet">${towea.ultraviolet}</span>
</li>
<li>
    <span>湿度</span>
    <span class="humidity">${towea.humidity}</span>%
</li>
<li>
    <span>日出</span>
    <span class="sunriseTime">${towea.sunriseTime}</span>
</li>
<li>
    <span>日落</span>
    <span class="sunsetTime">${towea.sunsetTime}</span>
</li>
</ul>
    </div>`

    // 七日天气数据为一个数组，可以遍历数组
    
    // map遍历数组

    const sevObj = weaData.dayForecast
    // 遍历后每个元素都是天气的小对象
    const sevenobj = sevObj.map(item =>{
     return `<li class="item">
     <div class="date-box">
         <span class="dateFormat">${item.dateFormat}</span>
         <span class="date">${item.date}</span>
     </div>
     <div class="data-second">
         <img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
     <span class="weather">${item.weather}</span>
         </div>
     <div class="temp-second">
         <span class="temNight">${item.temNight}</span>~
         <span class="temDay">${item.temDay}</span>
         <span>℃</span>
     </div>
     <div class="wind">
         <span class="windDirection">${item.windDirection}</span>
         <span class="windPower">&lt;${item.windPower}</span>
     </div>
 </li>`
//  join 
    }).join('')
    document.querySelector('.week-wrap').innerHTML = sevenobj
    // 在本地返回大数组，拼接起来接受打印
console.log(sevObj);


  
        document.querySelector('.title').innerHTML= dataStr
        document.querySelector('.area').innerHTML= weaData.area
        document.querySelector('.weather-box').innerHTML = weatherData
        document.querySelector('.today-weather').innerHTML = toweather
       
    console.log(result);
    }).catch(error=>{
        console.log(error);
    })
}    //⭐目标三：切换城市天气



// // dataset意为自定义属性，可用于值和值的关联

// // 自定义属性方法：data-******


// ⭐用事件委托绑定li上的点击事件

document.querySelector('.search-list').addEventListener('click', e => {
    // ⭐事件处理函数，当事件源为li时
   console.log(e.target.dataset.code);

   const codes = e.target.dataset.code

   getWeather(codes)




    // const cityCode = e.target.dataset.code

    // console.log(cityCode);

    // }
})

到这里，本次的项目就彻底完成了，让我们看一看效果图