• AJAX——案例_天气预报

    天气预报案例

    步骤

    1. 获取北京市天气数据，展示
    2. 搜索城市列表，展示
    3. 点击城市，显示对应天气数据

    index.css代码 

    1. html,
    2. body {
    3.   height: 100%;
    4. }
    5.  
    6. body {
    7.   background-image: linear-gradient(135deg, #50B1FF 0%, #1F57D6 100%);
    8. }
    9.  
    10. .container {
    11.   width: 1200px;
    12.   margin: 0 auto;
    13.   height: 100%;
    14. }
    15.  
    16. /* 顶部 */
    17. .top-box {
    18.   display: flex;
    19.   padding: 50px;
    20.   justify-content: space-between;
    21. }
    22.  
    23. /* 日期 */
    24. .top-box .title .data {
    25.   color: white;
    26.   margin-right: 20px;
    27. }
    28.  
    29. /* 农历 */
    30. .top-box .title .calendar {
    31.   opacity: .72;
    32. }
    33.  
    34. /* 搜索区域 */
    35. .search-box {
    36.   display: flex;
    37.   justify-content: space-between;
    38.   align-items: center;
    39. }
    40.  
    41. .search-box .location {
    42.   display: flex;
    43.   align-items: center;
    44.   margin-right: 20px;
    45.   font-size: 16px;
    46. }
    47.  
    48. .search-box .location img {
    49.   width: 20px;
    50.   height: 20px;
    51.   margin-right: 7.1px;
    52. }
    53.  
    54. .search-box .search-city {
    55.   width: 234px;
    56.   height: 32px;
    57.   border: none;
    58.   border-radius: 16px;
    59.   padding-left: 10px;
    60.   background-color: rgba(255, 255, 255, .2);
    61.   color: white;
    62.   font-size: 14px;
    63. }
    64.  
    65. .search {
    66.   position: relative;
    67. }
    68.  
    69. /* 搜索列表 */
    70. .search-list {
    71.   width: 100%;
    72.   height: 200px;
    73.   overflow-y: scroll;
    74.   background-color: #fff;
    75.   position: absolute;
    76.   left: 0;
    77.   top: 40px;
    78.   display: none;
    79. }
    80. .search-list.show{
    81.   display: block;
    82. }
    83. .search-list::-webkit-scrollbar{
    84.   display: none;
    85. }
    86. .search-list li{
    87.   color: black;
    88.   font-size: 14px;
    89.   padding: 15px 10px;
    90. }
    91. .search-list li:hover{
    92.   background-color: lightgray;
    93. }
    94.  
    95. /* 当前天气 */
    96. .weather-box {
    97.   display: flex;
    98.   padding-left: 50px;
    99.   align-items: flex-end;
    100. }
    101.  
    102. .weather-box .tem-box {
    103.   margin-right: 42px;
    104.   display: flex;
    105.   flex-direction: column;
    106. }
    107.  
    108. .weather-box .tem-box .temp span{
    109.   font-size: 90px;
    110.   display: inline-block;
    111.   height: 100px;
    112.   margin-bottom: 10px;
    113.   line-height: 100px;
    114. }
    115.  
    116. .climate-box .air {
    117.   display: inline;
    118.   padding: 5px 10px;
    119.   height: 32px;
    120.   border-radius: 16px;
    121.   background: #65D45A;
    122.   text-align: center;
    123.   line-height: 32px;
    124.   font-family: PingFangSC-Medium;
    125.   font-size: 18px;
    126.   color: #FFFFFF;
    127.   letter-spacing: 0;
    128.   font-weight: 500;
    129. }
    130.  
    131. .climate-box .weather-list {
    132.   display: flex;
    133.   align-items: flex-end;
    134.   margin-top: 21px;
    135.   margin-bottom: 28px;
    136. }
    137.  
    138. .climate-box .weather-list li img {
    139.   width: 20px;
    140.   height: 20px;
    141. }
    142.  
    143. .climate-box .weather-list li {
    144.   margin-right: 20px;
    145. }
    146.  
    147. .climate-box .weather-list li,
    148. .climate-box .weather-list span {
    149.   display: flex;
    150.   align-items: center;
    151.   font-size: 16px;
    152. }
    153.  
    154. /* 今日详细天气 */
    155. .today-weather{
    156.   display: flex;
    157.   padding-left: 50px;
    158. }
    159. .today-weather .range-box,
    160. .today-weather .range {
    161.   font-size: 16px;
    162. }
    163.  
    164. .today-weather .sun-list {
    165.   display: flex;
    166.   align-items: center;
    167.   margin-left: 50px;
    168. }
    169.  
    170. .today-weather .sun-list li {
    171.   font-size: 16px;
    172.   margin-right: 42px;
    173. }
    174.  
    175. /* 周天气预报 */
    176. .week-weather-box {
    177.   height: 382px;
    178.   border-radius: 10px;
    179.   background-color: #fff;
    180.   width: 1039px;
    181.   margin: 30px auto;
    182.   padding: 30px;
    183. }
    184. .week-weather-box .title {
    185.   font-size: 20px;
    186.   color: #3A475A;
    187.   letter-spacing: 0;
    188.   font-weight: 600;
    189. }
    190. /* 列表 */
    191. .week-wrap {
    192.   display: flex;
    193.   margin: 0 auto;
    194.   margin-top: 30px;
    195. }
    196. .week-wrap .item {
    197.   width: 150px;
    198.   height: 254px;
    199.   cursor: pointer;
    200.   text-align: center;
    201.   display: flex;
    202.   flex-direction: column;
    203.   align-items: center;
    204.   padding-top: 30px;
    205. }
    206. .week-wrap .item:hover {
    207.   background: #F7FAFF;
    208.   border-radius: 10px;
    209. }
    210.  
    211. .week-wrap .item span{
    212.   color: #393F48;
    213. }
    214.  
    215. .week-wrap .item .date-box {
    216.   display: flex;
    217.   flex-direction: column;
    218.   align-items: center;
    219.   margin-bottom: 4px;
    220. }
    221.  
    222. .week-wrap .item .date-box .dateFormat {
    223.   font-size: 16px;
    224.   color: #393F48;
    225.   letter-spacing: 0;
    226.   text-align: center;
    227.   font-weight: 400;
    228. }
    229. .week-wrap .item .date-box .date {
    230.   font-size: 16px;
    231.   color: #88909D;
    232.   letter-spacing: 0;
    233.   text-align: center;
    234.   font-weight: 400;
    235. }
    236.  
    237. .week-wrap .item img {
    238.   width: 46px;
    239.   height: 46px;
    240.   margin: 12px 0 12px;
    241. }
    242.  
    243. .week-wrap .item .weather {
    244.   font-size: 16px;
    245.   color: #393F48;
    246.   letter-spacing: 0;
    247.   text-align: center;
    248.   font-weight: 400;
    249.   margin-bottom: 4px;
    250. }
    251.  
    252. .week-wrap .item .temp  {
    253.   font-size: 14px;
    254.   color: #393F48;
    255.   letter-spacing: 0;
    256.   text-align: center;
    257.   font-weight: 500;
    258.   margin-bottom: 10px;
    259. }
    260.  
    261. .week-wrap .item .wind span {
    262.   font-size: 14px;
    263.   color: #676C74;
    264.   letter-spacing: 0;
    265.   text-align: center;
    266.   font-weight: 400;
    267. }

    reset.css代码

    1. * {
    2.   box-sizing: border-box;
    3.   font-size: 18px;
    4.   ;
    5.   color: white;
    6. }
    7.  
    8. body,
    9. ul,
    10. h1,
    11. h2,
    12. h3,
    13. h4,
    14. h5,
    15. h6 {
    16.   margin: 0;
    17.   padding: 0;
    18. }
    19.  
    20. h1,
    21. h2,
    22. h3,
    23. h4,
    24. h5,
    25. h6 {
    26.   font-size: 100%;
    27.   font-weight: normal;
    28. }
    29.  
    30. a {
    31.   text-decoration: none;
    32. }
    33.  
    34. ul {
    35.   list-style: none;
    36. }
    37.  
    38. img {
    39.   border: 0px;
    40. }
    41.  
    42. input {
    43.   appearance: none;
    44.   outline: none;
    45. }
    46.  
    47. input::-webkit-input-placeholder {
    48.   /* WebKit, Blink, Edge */
    49.  
    50.   color: #E6EBFF;
    51.  
    52. }
    53.  
    54. :-moz-placeholder {
    55.   /* Mozilla Firefox 4 to 18 */
    56.  
    57.   color: #E6EBFF;
    58.  
    59. }
    60.  
    61. ::-moz-placeholder {
    62.   /* Mozilla Firefox 19+ */
    63.  
    64.   color: #E6EBFF;
    65.  
    66. }
    67.  
    68. input:-ms-input-placeholder {
    69.   /* Internet Explorer 10-11 */
    70.  
    71.   color: #E6EBFF;
    72.  
    73. }
    74.  
    75. input::-ms-input-placeholder {
    76.   /* Microsoft Edge */
    77.  
    78.   color: #E6EBFF;
    79.  
    80. }
    81.  
    82. /* 清除浮动，解决margin-top塌陷 */
    83. .clearfix:before,
    84. .clearfix:after {
    85.   content: '';
    86.   display: table;
    87. }
    88.  
    89. .clearfix:after {
    90.   clear: both;
    91. }
    92.  
    93. .clearfix {
    94.   zoom: 1;
    95. }
    96.  
    97. .fl {
    98.   float: left;
    99. }
    100.  
    101. .fr {
    102.   float: right;
    103. }

    index.js代码

    1. /**
    2.  * 目标1：默认显示-北京市天气
    3.  *  1.1 获取北京市天气数据
    4.  *  1.2 数据展示到页面
    5.  */
    6. // 获取并渲染城市天气函数
    7. function getWeather(cityCode) {
    8.     // 1.1 获取北京市天气数据
    9.     myAxios({
    10.       url: 'http://hmajax.itheima.net/api/weather',
    11.       params: {
    12.         city: cityCode
    13.       }
    14.     }).then(result => {
    15.       console.log(result)
    16.       const wObj = result.data
    17.       // 1.2 数据展示到页面
    18.       // 阳历和农历日期
    19.       const dateStr = `<span class="dateShort">${wObj.date}</span>
    20.       <span class="calendar">农历&nbsp;
    21.         <span class="dateLunar">${wObj.dateLunar}</span>
    22.       </span>`
    23.       document.querySelector('.title').innerHTML = dateStr
    24.       // 城市名字
    25.       document.querySelector('.area').innerHTML = wObj.area
    26.       // 当天气温
    27.       const nowWStr = `<div class="tem-box">
    28.       <span class="temp">
    29.         <span class="temperature">${wObj.temperature}</span>
    30.         <span>°</span>
    31.       </span>
    32.     </div>
    33.     <div class="climate-box">
    34.       <div class="air">
    35.         <span class="psPm25">${wObj.psPm25}</span>
    36.         <span class="psPm25Level">${wObj.psPm25Level}</span>
    37.       </div>
    38.       <ul class="weather-list">
    39.         <li>
    40.           <img src="${wObj.weatherImg}" class="weatherImg" alt="">
    41.           <span class="weather">${wObj.weather}</span>
    42.         </li>
    43.         <li class="windDirection">${wObj.windDirection}</li>
    44.         <li class="windPower">${wObj.windPower}</li>
    45.       </ul>
    46.     </div>`
    47.       document.querySelector('.weather-box').innerHTML = nowWStr
    48.       // 当天天气
    49.       const twObj = wObj.todayWeather
    50.       const todayWStr = `<div class="range-box">
    51.       <span>今天：</span>
    52.       <span class="range">
    53.         <span class="weather">${twObj.weather}</span>
    54.         <span class="temNight">${twObj.temNight}</span>
    55.         <span>-</span>
    56.         <span class="temDay">${twObj.temDay}</span>
    57.         <span>℃</span>
    58.       </span>
    59.     </div>
    60.     <ul class="sun-list">
    61.       <li>
    62.         <span>紫外线</span>
    63.         <span class="ultraviolet">${twObj.ultraviolet}</span>
    64.       </li>
    65.       <li>
    66.         <span>湿度</span>
    67.         <span class="humidity">${twObj.humidity}</span>%
    68.       </li>
    69.       <li>
    70.         <span>日出</span>
    71.         <span class="sunriseTime">${twObj.sunriseTime}</span>
    72.       </li>
    73.       <li>
    74.         <span>日落</span>
    75.         <span class="sunsetTime">${twObj.sunsetTime}</span>
    76.       </li>
    77.     </ul>`
    78.       document.querySelector('.today-weather').innerHTML = todayWStr
    79.   
    80.       // 7日天气预报数据展示
    81.       const dayForecast = wObj.dayForecast
    82.       const dayForecastStr = dayForecast.map(item => {
    83.         return `<li class="item">
    84.         <div class="date-box">
    85.           <span class="dateFormat">${item.dateFormat}</span>
    86.           <span class="date">${item.date}</span>
    87.         </div>
    88.         <img src="${item.weatherImg}" alt="" class="weatherImg">
    89.         <span class="weather">${item.weather}</span>
    90.         <div class="temp">
    91.           <span class="temNight">${item.temNight}</span>-
    92.           <span class="temDay">${item.temDay}</span>
    93.           <span>℃</span>
    94.         </div>
    95.         <div class="wind">
    96.           <span class="windDirection">${item.windDirection}</span>
    97.           <span class="windPower">${item.windPower}</span>
    98.         </div>
    99.       </li>`
    100.       }).join('')
    101.       // console.log(dayForecastStr)
    102.       document.querySelector('.week-wrap').innerHTML = dayForecastStr
    103.     })
    104.   }
    105.   
    106.   // 默认进入网页-就要获取天气数据（北京市城市编码：'110100'）
    107.   getWeather('110100')
    108.   
    109.   /**
    110.    * 目标2：搜索城市列表
    111.    *  2.1 绑定input事件，获取关键字
    112.    *  2.2 获取展示城市列表数据
    113.    */
    114.   // 2.1 绑定input事件，获取关键字
    115.   document.querySelector('.search-city').addEventListener('input', (e) => {
    116.     console.log(e.target.value)
    117.     // 2.2 获取展示城市列表数据
    118.     myAxios({
    119.       url: 'http://hmajax.itheima.net/api/weather/city',
    120.       params: {
    121.         city: e.target.value
    122.       }
    123.     }).then(result => {
    124.       console.log(result)
    125.       const liStr = result.data.map(item => {
    126.         return `<li class="city-item" data-code="${item.code}">${item.name}</li>`
    127.       }).join('')
    128.       console.log(liStr)
    129.       document.querySelector('.search-list').innerHTML = liStr
    130.     })
    131.   })
    132.   
    133.   /**
    134.    * 目标3：切换城市天气
    135.    *  3.1 绑定城市点击事件，获取城市code值
    136.    *  3.2 调用获取并展示天气的函数
    137.    */
    138.   // 3.1 绑定城市点击事件，获取城市code值
    139.   document.querySelector('.search-list').addEventListener('click', e => {
    140.     if (e.target.classList.contains('city-item')) {
    141.       // 只有点击城市li才会走这里
    142.       const cityCode = e.target.dataset.code
    143.       console.log(cityCode)
    144.       // 3.2 调用获取并展示天气的函数
    145.       getWeather(cityCode)
    146.     }
    147.   })

    my-axios.js代码

    1. function myAxios(config) {
    2.   return new Promise((resolve, reject) => {
    3.     const xhr = new XMLHttpRequest()
    4.     if (config.params) {
    5.       const paramsObj = new URLSearchParams(config.params)
    6.       const queryString = paramsObj.toString()
    7.       config.url += `?${queryString}`
    8.     }
    9.     xhr.open(config.method || 'GET', config.url)
    10.     xhr.addEventListener('loadend', () => {
    11.       if (xhr.status >= 200 && xhr.status < 300) {
    12.         resolve(JSON.parse(xhr.response))
    13.       } else {
    14.         reject(new Error(xhr.response))
    15.       }
    16.     })
    17.     if (config.data) {
    18.       const jsonStr = JSON.stringify(config.data)
    19.       xhr.setRequestHeader('Content-Type', 'application/json')
    20.       xhr.send(jsonStr)
    21.     } else {
    22.       xhr.send()
    23.     }
    24.   })
    25. }

    search.js代码

    1. // 控制搜索列表，显示/隐藏
    2. const searchList = document.querySelector('.search-list')
    3. // 输入框内容改变时，有城市关键字出现列表，没有则不出现列表
    4. document.querySelector('.search-city').addEventListener('input', e => {
    5.   if (e.target.value.length > 0) {
    6.     searchList.classList.add('show')
    7.   } else {
    8.     searchList.classList.remove('show')
    9.   }
    10. })
    11. // 输入框失焦，隐藏搜索列表
    12. document.querySelector('.search-city').addEventListener('blur', e => {
    13.   // 延迟消失，保证点击获取到城市code后，再隐藏下拉列表
    14.   setTimeout(() => {
    15.     searchList.classList.remove('show')
    16.   }, 500)
    17. })
    18. // 输入框聚焦，显示搜索列表
    19. document.querySelector('.search-city').addEventListener('focus', e => {
    20.   if (e.target.value.length > 0) {
    21.     searchList.classList.add('show')
    22.   }
    23. })

    index.html代码

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <link rel="stylesheet" href="./css/reset.css">
    9.   <link rel="stylesheet" href="./css/index.css">
    10.   <title>案例_天气预报</title>
    11. </head>
    12.  
    13. <body>
    14.   <div class="container">
    15.     <!-- 顶部 -->
    16.     <div class="top-box">
    17.       <div class="title">
    18.         <span class="dateShort">10月28日</span>
    19.         <span class="calendar">农历&nbsp;
    20.           <span class="dateLunar">十月初四</span>
    21.         </span>
    22.       </div>
    23.       <div class="search-box">
    24.         <div class="location">
    25.           <img src="./imgs/定位.png" alt="">
    26.           <span class="area">城市名</span>
    27.         </div>
    28.         <!-- 搜索框+搜索列表 -->
    29.         <div class="search">
    30.           <input type="text" class="search-city" placeholder="搜索城市">
    31.           <ul class="search-list">
    32.             <li class="city-item">北京市</li>
    33.           </ul>
    34.         </div>
    35.       </div>
    36.     </div>
    37.     <!-- 当前天气 -->
    38.     <div class="weather-box">
    39.       <div class="tem-box">
    40.         <span class="temp">
    41.           <span class="temperature">12</span>
    42.           <span>°</span>
    43.         </span>
    44.       </div>
    45.       <div class="climate-box">
    46.         <div class="air">
    47.           <span class="psPm25">55</span>
    48.           <span class="psPm25Level">良</span>
    49.         </div>
    50.         <ul class="weather-list">
    51.           <li>
    52.             <img src="./imgs/小雨-line.png" class="weatherImg" alt="">
    53.             <span class="weather">多云</span>
    54.           </li>
    55.           <li class="windDirection">东南风</li>
    56.           <li class="windPower">2级</li>
    57.         </ul>
    58.       </div>
    59.     </div>
    60.     <div class="today-weather">
    61.       <div class="range-box">
    62.         <span>今天：</span>
    63.         <span class="range">
    64.           <span class="weather">晴</span>
    65.           <span class="temNight">9</span>
    66.           <span>-</span>
    67.           <span class="temDay">14</span>
    68.           <span>℃</span>
    69.         </span>
    70.       </div>
    71.       <ul class="sun-list">
    72.         <li>
    73.           <span>紫外线</span>
    74.           <span class="ultraviolet">强</span>
    75.         </li>
    76.         <li>
    77.           <span>湿度</span>
    78.           <span class="humidity">53</span>%
    79.         </li>
    80.         <li>
    81.           <span>日出</span>
    82.           <span class="sunriseTime">06:38</span>
    83.         </li>
    84.         <li>
    85.           <span>日落</span>
    86.           <span class="sunsetTime">17:18</span>
    87.         </li>
    88.       </ul>
    89.     </div>
    90.     <!-- 周天气预报 -->
    91.     <div class="week-weather-box">
    92.       <div class="title">7日内天气预报</div>
    93.       <ul class="week-wrap">
    94.         <li class="item">
    95.           <div class="date-box">
    96.             <span class="dateFormat">今天</span>
    97.             <span class="date">10月28日</span>
    98.           </div>
    99.           <img src="./imgs/多云.png" alt="" class="weatherImg">
    100.           <span class="weather">多云</span>
    101.           <div class="temp">
    102.             <span class="temNight">12</span>-
    103.             <span class="temDay">12</span>
    104.             <span>℃</span>
    105.           </div>
    106.           <div class="wind">
    107.             <span class="windDirection">东南风</span>
    108.             <span class="windPower">&lt;3级</span>
    109.           </div>
    110.         </li>
    111.         <li class="item">
    112.           <div class="date-box">
    113.             <span class="dateFormat">今天</span>
    114.             <span class="date">10月28日</span>
    115.           </div>
    116.           <img src="./imgs/多云.png" alt="" class="weatherImg">
    117.           <span class="weather">多云</span>
    118.           <div class="temp">
    119.             <span class="temDay">12</span>-
    120.             <span class="temNight">12</span>
    121.             <span>℃</span>
    122.           </div>
    123.           <div class="wind">
    124.             <span class="windDirection">东南风</span>
    125.             <span class="windPower">&lt;3级</span>
    126.           </div>
    127.         </li>
    128.         <li class="item">
    129.           <div class="date-box">
    130.             <span class="dateFormat">今天</span>
    131.             <span class="date">10月28日</span>
    132.           </div>
    133.           <img src="./imgs/多云.png" alt="" class="weatherImg">
    134.           <span class="weather">多云</span>
    135.           <div class="temp">
    136.             <span class="temDay">12</span>-
    137.             <span class="temNight">12</span>
    138.             <span>℃</span>
    139.           </div>
    140.           <div class="wind">
    141.             <span class="windDirection">东南风</span>
    142.             <span class="windPower">&lt;3级</span>
    143.           </div>
    144.         </li>
    145.         <li class="item">
    146.           <div class="date-box">
    147.             <span class="dateFormat">今天</span>
    148.             <span class="date">10月28日</span>
    149.           </div>
    150.           <img src="./imgs/多云.png" alt="" class="weatherImg">
    151.           <span class="weather">多云</span>
    152.           <div class="temp">
    153.             <span class="temDay">12</span>-
    154.             <span class="temNight">12</span>
    155.             <span>℃</span>
    156.           </div>
    157.           <div class="wind">
    158.             <span class="windDirection">东南风</span>
    159.             <span class="windPower">&lt;3级</span>
    160.           </div>
    161.         </li>
    162.         <li class="item">
    163.           <div class="date-box">
    164.             <span class="dateFormat">今天</span>
    165.             <span class="date">10月28日</span>
    166.           </div>
    167.           <img src="./imgs/多云.png" alt="" class="weatherImg">
    168.           <span class="weather">多云</span>
    169.           <div class="temp">
    170.             <span class="temDay">12</span>-
    171.             <span class="temNight">12</span>
    172.             <span>℃</span>
    173.           </div>
    174.           <div class="wind">
    175.             <span class="windDirection">东南风</span>
    176.             <span class="windPower">&lt;3级</span>
    177.           </div>
    178.         </li>
    179.         <li class="item">
    180.           <div class="date-box">
    181.             <span class="dateFormat">今天</span>
    182.             <span class="date">10月28日</span>
    183.           </div>
    184.           <img src="./imgs/多云.png" alt="" class="weatherImg">
    185.           <span class="weather">多云</span>
    186.           <div class="temp">
    187.             <span class="temDay">12</span>-
    188.             <span class="temNight">12</span>
    189.             <span>℃</span>
    190.           </div>
    191.           <div class="wind">
    192.             <span class="windDirection">东南风</span>
    193.             <span class="windPower">&lt;3级</span>
    194.           </div>
    195.         </li>
    196.         <li class="item">
    197.           <div class="date-box">
    198.             <span class="dateFormat">今天</span>
    199.             <span class="date">10月28日</span>
    200.           </div>
    201.           <img src="./imgs/多云.png" alt="" class="weatherImg">
    202.           <span class="weather">多云</span>
    203.           <div class="temp">
    204.             <span class="temDay">12</span>-
    205.             <span class="temNight">12</span>
    206.             <span>℃</span>
    207.           </div>
    208.           <div class="wind">
    209.             <span class="windDirection">东南风</span>
    210.             <span class="windPower">&lt;3级</span>
    211.           </div>
    212.         </li>
    213.       </ul>
    214.     </div>
    215.   </div>
    216.   <!-- 自己封装myAxios函数 -->
    217.   <script src="./js/my-axios.js"></script>
    218.   <!-- 搜索框+下拉菜单出现逻辑 -->
    219.   <script src="./js/search.js"></script>
    220.   <!-- 核心js -->
    221.   <script src="./js/index.js"></script>
    222. </body>
    223.  
    224. </html>

  • 相关阅读:
    台达PLC出现故障该怎么进行远程维护和程序上下载？
    扬帆牧哲—跨境电商商标注册要注意的地方
    kafka 通过 jdbc 从oracle抓取数据
    单元测试，集成测试，系统测试的区别是什么？
    设计模式之拦截器模式
    Tomcat常见问题解决方法总结，无法自动，无法访问，控制台乱码
    彻底理解Java并发：synchronized关键字
    requests模块高级用法练习
    Oracle数据库：oracle启动，oracle客户端工具plsql安装教程和使用方法
    Pyinstaller+InstallForge多文件项目软件打包
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/138055230