天气预报案例
步骤
- 获取北京市天气数据，展示
- 搜索城市列表，展示
- 点击城市，显示对应天气数据
index.css代码
html,
body {height: 100%;
}body {background-image: linear-gradient(135deg, #50B1FF 0%, #1F57D6 100%);
}.container {width: 1200px;margin: 0 auto;height: 100%;
}/* 顶部 */
.top-box {display: flex;padding: 50px;justify-content: space-between;
}/* 日期 */
.top-box .title .data {color: white;margin-right: 20px;
}/* 农历 */
.top-box .title .calendar {opacity: .72;
}/* 搜索区域 */
.search-box {display: flex;justify-content: space-between;align-items: center;
}.search-box .location {display: flex;align-items: center;margin-right: 20px;font-size: 16px;
}.search-box .location img {width: 20px;height: 20px;margin-right: 7.1px;
}.search-box .search-city {width: 234px;height: 32px;border: none;border-radius: 16px;padding-left: 10px;background-color: rgba(255, 255, 255, .2);color: white;font-size: 14px;
}.search {position: relative;
}/* 搜索列表 */
.search-list {width: 100%;height: 200px;overflow-y: scroll;background-color: #fff;position: absolute;left: 0;top: 40px;display: none;
}
.search-list.show{display: block;
}
.search-list::-webkit-scrollbar{display: none;
}
.search-list li{color: black;font-size: 14px;padding: 15px 10px;
}
.search-list li:hover{background-color: lightgray;
}/* 当前天气 */
.weather-box {display: flex;padding-left: 50px;align-items: flex-end;
}.weather-box .tem-box {margin-right: 42px;display: flex;flex-direction: column;
}.weather-box .tem-box .temp span{font-size: 90px;display: inline-block;height: 100px;margin-bottom: 10px;line-height: 100px;
}.climate-box .air {display: inline;padding: 5px 10px;height: 32px;border-radius: 16px;background: #65D45A;text-align: center;line-height: 32px;font-family: PingFangSC-Medium;font-size: 18px;color: #FFFFFF;letter-spacing: 0;font-weight: 500;
}.climate-box .weather-list {display: flex;align-items: flex-end;margin-top: 21px;margin-bottom: 28px;
}.climate-box .weather-list li img {width: 20px;height: 20px;
}.climate-box .weather-list li {margin-right: 20px;
}.climate-box .weather-list li,
.climate-box .weather-list span {display: flex;align-items: center;font-size: 16px;
}/* 今日详细天气 */
.today-weather{display: flex;padding-left: 50px;
}
.today-weather .range-box,
.today-weather .range {font-size: 16px;
}.today-weather .sun-list {display: flex;align-items: center;margin-left: 50px;
}.today-weather .sun-list li {font-size: 16px;margin-right: 42px;
}/* 周天气预报 */
.week-weather-box {height: 382px;border-radius: 10px;background-color: #fff;width: 1039px;margin: 30px auto;padding: 30px;
}
.week-weather-box .title {font-size: 20px;color: #3A475A;letter-spacing: 0;font-weight: 600;
}
/* 列表 */
.week-wrap {display: flex;margin: 0 auto;margin-top: 30px;
}
.week-wrap .item {width: 150px;height: 254px;cursor: pointer;text-align: center;display: flex;flex-direction: column;align-items: center;padding-top: 30px;
}
.week-wrap .item:hover {background: #F7FAFF;border-radius: 10px;
}.week-wrap .item span{color: #393F48;
}.week-wrap .item .date-box {display: flex;flex-direction: column;align-items: center;margin-bottom: 4px;
}.week-wrap .item .date-box .dateFormat {font-size: 16px;color: #393F48;letter-spacing: 0;text-align: center;font-weight: 400;
}
.week-wrap .item .date-box .date {font-size: 16px;color: #88909D;letter-spacing: 0;text-align: center;font-weight: 400;
}.week-wrap .item img {width: 46px;height: 46px;margin: 12px 0 12px;
}.week-wrap .item .weather {font-size: 16px;color: #393F48;letter-spacing: 0;text-align: center;font-weight: 400;margin-bottom: 4px;
}.week-wrap .item .temp {font-size: 14px;color: #393F48;letter-spacing: 0;text-align: center;font-weight: 500;margin-bottom: 10px;
}.week-wrap .item .wind span {font-size: 14px;color: #676C74;letter-spacing: 0;text-align: center;font-weight: 400;
}reset.css代码
* {box-sizing: border-box;font-size: 18px;;color: white;
}body,
ul,
h1,
h2,
h3,
h4,
h5,
h6 {margin: 0;padding: 0;
}h1,
h2,
h3,
h4,
h5,
h6 {font-size: 100%;font-weight: normal;
}a {text-decoration: none;
}ul {list-style: none;
}img {border: 0px;
}input {appearance: none;outline: none;
}input::-webkit-input-placeholder {/* WebKit, Blink, Edge */color: #E6EBFF;}:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #E6EBFF;}::-moz-placeholder {/* Mozilla Firefox 19+ */color: #E6EBFF;}input:-ms-input-placeholder {/* Internet Explorer 10-11 */color: #E6EBFF;}input::-ms-input-placeholder {/* Microsoft Edge */color: #E6EBFF;}/* 清除浮动，解决margin-top塌陷 */
.clearfix:before,
.clearfix:after {content: '';display: table;
}.clearfix:after {clear: both;
}.clearfix {zoom: 1;
}.fl {float: left;
}.fr {float: right;
}index.js代码
/*** 目标1：默认显示-北京市天气* 1.1 获取北京市天气数据* 1.2 数据展示到页面*/
// 获取并渲染城市天气函数
function getWeather(cityCode) {// 1.1 获取北京市天气数据myAxios({url: 'http://hmajax.itheima.net/api/weather',params: {city: cityCode}}).then(result => {console.log(result)const wObj = result.data// 1.2 数据展示到页面// 阳历和农历日期const dateStr = `<span class="dateShort">${wObj.date}</span><span class="calendar">农历 <span class="dateLunar">${wObj.dateLunar}</span></span>`document.querySelector('.title').innerHTML = dateStr// 城市名字document.querySelector('.area').innerHTML = wObj.area// 当天气温const nowWStr = `<div class="tem-box"><span class="temp"><span class="temperature">${wObj.temperature}</span><span>°</span></span></div><div class="climate-box"><div class="air"><span class="psPm25">${wObj.psPm25}</span><span class="psPm25Level">${wObj.psPm25Level}</span></div><ul class="weather-list"><li><img src="${wObj.weatherImg}" class="weatherImg" alt=""><span class="weather">${wObj.weather}</span></li><li class="windDirection">${wObj.windDirection}</li><li class="windPower">${wObj.windPower}</li></ul></div>`document.querySelector('.weather-box').innerHTML = nowWStr// 当天天气const twObj = wObj.todayWeatherconst todayWStr = `<div class="range-box"><span>今天：</span><span class="range"><span class="weather">${twObj.weather}</span><span class="temNight">${twObj.temNight}</span><span>-</span><span class="temDay">${twObj.temDay}</span><span>℃</span></span></div><ul class="sun-list"><li><span>紫外线</span><span class="ultraviolet">${twObj.ultraviolet}</span></li><li><span>湿度</span><span class="humidity">${twObj.humidity}</span>%</li><li><span>日出</span><span class="sunriseTime">${twObj.sunriseTime}</span></li><li><span>日落</span><span class="sunsetTime">${twObj.sunsetTime}</span></li></ul>`document.querySelector('.today-weather').innerHTML = todayWStr// 7日天气预报数据展示const dayForecast = wObj.dayForecastconst dayForecastStr = dayForecast.map(item => {return `<li class="item"><div class="date-box"><span class="dateFormat">${item.dateFormat}</span><span class="date">${item.date}</span></div><img src="${item.weatherImg}" alt="" class="weatherImg"><span class="weather">${item.weather}</span><div class="temp"><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">${item.windPower}</span></div></li>`}).join('')// console.log(dayForecastStr)document.querySelector('.week-wrap').innerHTML = dayForecastStr})}// 默认进入网页-就要获取天气数据（北京市城市编码：'110100'）getWeather('110100')/*** 目标2：搜索城市列表* 2.1 绑定input事件，获取关键字* 2.2 获取展示城市列表数据*/// 2.1 绑定input事件，获取关键字document.querySelector('.search-city').addEventListener('input', (e) => {console.log(e.target.value)// 2.2 获取展示城市列表数据myAxios({url: 'http://hmajax.itheima.net/api/weather/city',params: {city: e.target.value}}).then(result => {console.log(result)const liStr = result.data.map(item => {return `<li class="city-item" data-code="${item.code}">${item.name}</li>`}).join('')console.log(liStr)document.querySelector('.search-list').innerHTML = liStr})})/*** 目标3：切换城市天气* 3.1 绑定城市点击事件，获取城市code值* 3.2 调用获取并展示天气的函数*/// 3.1 绑定城市点击事件，获取城市code值document.querySelector('.search-list').addEventListener('click', e => {if (e.target.classList.contains('city-item')) {// 只有点击城市li才会走这里const cityCode = e.target.dataset.codeconsole.log(cityCode)// 3.2 调用获取并展示天气的函数getWeather(cityCode)}})my-axios.js代码
function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()if (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) {const jsonStr = JSON.stringify(config.data)xhr.setRequestHeader('Content-Type', 'application/json')xhr.send(jsonStr)} else {xhr.send()}})
}search.js代码
// 控制搜索列表，显示/隐藏
const searchList = document.querySelector('.search-list')
// 输入框内容改变时，有城市关键字出现列表，没有则不出现列表
document.querySelector('.search-city').addEventListener('input', e => {if (e.target.value.length > 0) {searchList.classList.add('show')} else {searchList.classList.remove('show')}
})
// 输入框失焦，隐藏搜索列表
document.querySelector('.search-city').addEventListener('blur', e => {// 延迟消失，保证点击获取到城市code后，再隐藏下拉列表setTimeout(() => {searchList.classList.remove('show')}, 500)
})
// 输入框聚焦，显示搜索列表
document.querySelector('.search-city').addEventListener('focus', e => {if (e.target.value.length > 0) {searchList.classList.add('show')}
})index.html代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"><title>案例_天气预报</title>
</head><body><div class="container"><!-- 顶部 --><div class="top-box"><div class="title"><span class="dateShort">10月28日</span><span class="calendar">农历 <span class="dateLunar">十月初四</span></span></div><div class="search-box"><div class="location"><img src="./imgs/定位.png" alt=""><span class="area">城市名</span></div><!-- 搜索框+搜索列表 --><div class="search"><input type="text" class="search-city" placeholder="搜索城市"><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">12</span><span>°</span></span></div><div class="climate-box"><div class="air"><span class="psPm25">55</span><span class="psPm25Level">良</span></div><ul class="weather-list"><li><img src="./imgs/小雨-line.png" class="weatherImg" alt=""><span class="weather">多云</span></li><li class="windDirection">东南风</li><li class="windPower">2级</li></ul></div></div><div class="today-weather"><div class="range-box"><span>今天：</span><span class="range"><span class="weather">晴</span><span class="temNight">9</span><span>-</span><span class="temDay">14</span><span>℃</span></span></div><ul class="sun-list"><li><span>紫外线</span><span class="ultraviolet">强</span></li><li><span>湿度</span><span class="humidity">53</span>%</li><li><span>日出</span><span class="sunriseTime">06:38</span></li><li><span>日落</span><span class="sunsetTime">17:18</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">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temNight">12</span>-<span class="temDay">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower"><3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower"><3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower"><3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower"><3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower"><3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower"><3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower"><3级</span></div></li></ul></div></div><!-- 自己封装myAxios函数 --><script src="./js/my-axios.js"></script><!-- 搜索框+下拉菜单出现逻辑 --><script src="./js/search.js"></script><!-- 核心js --><script src="./js/index.js"></script>
</body></html>
