| 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> | |
| 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.todayWeather const 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.dayForecast const 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.code console.log(cityCode) // 3.2 调用获取并展示天气的函数 getWeather(cityCode) } }) | |
| my-Axios部分: | |
| 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.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; } | |
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
