原生JS+JSON 天气预报小项目 （含源码）

灰太狼 2023-02-15 15:59 54阅读 0赞

源码

源码链接

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>天气预报</title>
  8.     <link rel="stylesheet" href="css/index.css">
  9.     <script src="js/index.js"></script>
  10. </head>
  13. <body>
  15.     <div class="container">
  16.         <!-- 左边 -->
  17.         <div class="left-side">
  18.             <!-- 渐变 -->
  19.             <div class="gradient"></div>
  20.             <div class="date-container">
  21.                 <h2 class="date-dayname" id="date-dayname">周六</h2>
  22.                 <span class="date-day" id="date-day">2020-06-06</span>
  23.                 <!-- location 图标 -->
  24.                 <span class="iconfont" id="location">开封</span>
  25.             </div>
  27.             <div class="weather-conteiner">
  28.                 <!-- 天气图标 -->
  29.                 <span class="iconfont" id="weather-l"></span>
  30.                 <div class="weather-temp" id="weather-temp">30℃</div>
  31.                 <div class="weather-desc" id="weather-desc">晴天</div>
  32.             </div>
  33.         </div>
  35.         <!-- 右边部分 -->
  36.         <div class="right-side">
  37.             <div class="today-info-container">
  38.                 <div class="today-info">
  39.                     <!-- PM2.5 -->
  40.                     <div class="pm clearfix ">
  41.                         <span class="title">PM2.5</span>
  42.                         <span class="value" id="pm">00</span>
  43.                     </div>
  44.                     <!-- 湿度 -->
  45.                     <div class="humidity clearfix a">
  46.                         <span class="title">湿度</span>
  47.                         <span class="value" id="humidity">00</span>
  48.                     </div>
  49.                     <!-- 风速 -->
  50.                     <div class="wind clearfix ">
  51.                         <span class="title">风速</span>
  52.                         <span class="value" id="wind">00</span>
  53.                     </div>
  54.                 </div>
  55.             </div>
  57.             <div class="week-container">
  58.                 <ul class="week-list">
  59.                     <li class="active" id="day1">
  60.                         <!-- 天气图标 -->
  61.                         <span class="iconfont"></span>
  62.                         <span class="day-name">周六</span>
  63.                         <span class="day-temp">30℃</span>
  64.                     </li>
  65.                     <li id="day2">
  66.                         <!-- 天气图标 -->
  67.                         <span class="iconfont"></span>
  68.                         <span class="day-name">周日</span>
  69.                         <span class="day-temp">30℃</span>
  70.                     </li>
  71.                     <li id="day3">
  72.                         <!-- 天气图标 -->
  73.                         <span class="iconfont"></span>
  74.                         <span class="day-name">周一</span>
  75.                         <span class="day-temp">30℃</span>
  76.                     </li>
  77.                     <li id="day4">
  78.                         <!-- 天气图标 -->
  79.                         <span class="iconfont"></span>
  80.                         <span class="day-name">周二</span>
  81.                         <span class="day-temp">30℃</span>
  82.                     </li>
  83.                 </ul>
  84.             </div>
  87.             <div class="location-container">
  88.                 <input type="text" id="city" placeholder="位置">
  89.                 <button class="location-button" id="location-button">
  90.                     <!-- location图标 -->
  91.                     <span class="iconfont" >查询</span>
  92.                 </button>
  93.             </div>
  94.         </div>
  95.     </div>
  98. </body>
  100. </html>

inded.css

  1. @font-face { 
  2.     font-family: 'iconfont';
  3.     /* project id 1866935 */
  4.     src: url('//at.alicdn.com/t/font_1866935_jaopflkhzf.eot');
  5.     src: url('//at.alicdn.com/t/font_1866935_jaopflkhzf.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1866935_jaopflkhzf.woff2') format('woff2'), url('//at.alicdn.com/t/font_1866935_jaopflkhzf.woff') format('woff'), url('//at.alicdn.com/t/font_1866935_jaopflkhzf.ttf') format('truetype'), url('//at.alicdn.com/t/font_1866935_jaopflkhzf.svg#iconfont') format('svg');
  6. }
  8. .iconfont { 
  9.     font-family: "iconfont"!important;
  10.     font-size: 16px;
  11.     font-style: normal;
  12. }
  15. /* 清除默认样式 */
  17. * { 
  18.     margin: 0px;
  19.     padding: 0px;
  20. }
  22. ul { 
  23.     list-style: none;
  24. }
  27. /* 高度塌陷问题 */
  29. .clearfix::after, .clearfix::before { 
  30.     content: "";
  31.     display: table;
  32.     clear: both;
  33. }
  35. body { 
  36.     width: 100%;
  37.     height: 100vh;
  38.     background-color: #424242;
  39.     display: flex;
  40.     align-items: center;
  41.     justify-content: center;
  42. }
  44. .container { 
  45.     height: 435px;
  46.     width: 740px;
  47.     background-color: #1F252D;
  48.     color: #ffffff;
  49.     border-radius: 25px;
  50.     box-shadow: 0 70px -10px rgba(0, 0, 0, 0.2);
  51. }
  53. .left-side { 
  54.     position: relative;
  55.     width: 300px;
  56.     height: 100%;
  57.     /* background-color: red; */
  58.     border-radius: 25px 0 0 25px;
  59.     box-shadow: 0 35px -10px rgba(0, 0, 0, 0.2);
  60.     float: left
  61. }
  63. .gradient { 
  64.     width: 100%;
  65.     height: 100%;
  66.     /* background-color: red; */
  67.     position: absolute;
  68.     background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
  69.     border-radius: 25px 0 0 25px;
  70.     opacity: 0.8;
  71. }
  73. .date-container { 
  74.     position: absolute;
  75.     top: 25px;
  76.     left: 25px;
  77. }
  79. .date-container .date-dayname { 
  80.     display: block;
  81.     margin-top: 4px;
  82. }
  84. #location { 
  85.     display: block;
  86.     margin-top: 4px;
  87. }
  89. .weather-conteiner { 
  90.     position: absolute;
  91.     bottom: 25px;
  92.     left: 25px;
  93. }
  95. #weather-l { 
  96.     font-size: 70px;
  97. }
  99. .weather-temp { 
  100.     font-size: 4em;
  101.     font-weight: bold;
  102. }
  104. .weather-desc { 
  105.     font-size: 20px;
  106. }
  109. /* 右边部分 */
  111. .right-side { 
  112.     float: right;
  113.     /* background-color: red; */
  114.     padding-top: 25px;
  115.     margin-right: 10px;
  116.     height: 100%;
  117.     box-sizing: border-box;
  118.     position: relative;
  119. }
  121. .today-info { 
  122.     /* background-color: royalblue; */
  123.     padding: 15px 15px 0 15px;
  124.     margin: 0 25px 25px 25px;
  125.     box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3);
  126.     border-radius: 10px;
  127. }
  129. .today-info div { 
  130.     border-bottom: 10px;
  131. }
  133. .today-info .a { 
  134.     margin: 6px 0px;
  135. }
  137. .today-info .title { 
  138.     float: left;
  139. }
  141. .today-info .value { 
  142.     float: right;
  143. }
  145. .week-list { 
  146.     margin: 10px 35px;
  147.     border-radius: 10px;
  148.     box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3);
  149. }
  151. .week-list li { 
  152.     float: left;
  153.     /* background-color: red; */
  154.     padding: 15px;
  155.     border-radius: 10px;
  156.     text-align: center;
  157.     cursor: pointer;
  158.     transition: 200ms;
  159. }
  161. .week-list li span { 
  162.     display: block;
  163. }
  165. .week-list { 
  166.     position: relative;
  167.     z-index: 99999;
  168. }
  170. .week-list li:hover { 
  171.     transform: scale(1.1);
  172.     background-color: #ffffff;
  173.     color: #222831;
  174. }
  176. .week-list .iconfont { 
  177.     font-size: 37px;
  178. }
  180. .active { 
  181.     transform: scale(1.1);
  182.     background-color: #ffffff;
  183.     color: #222831;
  184. }
  186. .week-list .day-name { 
  187.     margin-top: 10px;
  188.     text-align: center;
  189. }
  191. .week-list .day-temp { 
  192.     margin-top: 10px;
  193.     text-align: center;
  194.     font-size: 12px;
  195.     font-weight: bold;
  196. }
  198. .location-container { 
  199.     padding: 25px 35px;
  200.     position: relative;
  201.     /* background-color: red; */
  202.     width: 330px;
  203.     height: 126px;
  204. }
  206. .location-container input { 
  207.     outline: none;
  208.     width: 300px;
  209.     height: 28px;
  210.     padding: 6px;
  211.     display: block;
  212.     box-sizing: border-box;
  213.     /* font-weight: bold; */
  214.     position: absolute;
  215.     bottom: -15px;
  216.     left: calc(50% - 150px);
  217.     border: none;
  218.     border-radius: 5px;
  219.     color: #222831;
  220. }
  222. .location-container button { 
  223.     outline: none;
  224.     width: 320px;
  225.     /* height: 28px; */
  226.     padding: 8px;
  227.     box-sizing: border-box;
  228.     border-radius: 25px;
  229.     border: none;
  230.     color: #FFFFFF;
  231.     /* font-size: 18px; */
  232.     font-weight: bold;
  233.     cursor: pointer;
  234.     box-shadow: 0px 50px -5px rgba(0, 0, 0, 0.3);
  235.     background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
  236.     transition: 200ms;
  237.     position: absolute;
  238.     bottom: -80px;
  239.     left: calc(50% - 160px);
  240. }
  242. .location-container button:hover { 
  243.     transform: scale(1.05);
  244. }

index.js

  1. // 接口返回的数据就是一个函数的调用
  2. function weather(data) { 
  4.     var dateDayname = document.getElementById("date-dayname");
  5.     var dateDay = document.getElementById("date-day");
  6.     var location = document.getElementById("location");
  8.     var weatherL = document.getElementById("weather-l")
  9.     var weatherTemp = document.getElementById("weather-temp")
  10.     var weatherDesc = document.getElementById("weather-desc")
  12.     var pm = document.getElementById("pm")
  13.     var humidity = document.getElementById("humidity")
  14.     var wind = document.getElementById("wind")
  17.     var day1 = document.getElementById("day1");
  18.     var span1 = day1.getElementsByTagName("span");
  20.     var day2 = document.getElementById("day2");
  21.     var span2 = day2.getElementsByTagName("span");
  23.     var day3 = document.getElementById("day3");
  24.     var span3 = day3.getElementsByTagName("span");
  26.     var day4 = document.getElementById("day4");
  27.     var span4 = day4.getElementsByTagName("span");
  29.     dateDayname.innerHTML = data.weather[0].date.slice(0, 3);
  30.     dateDay.innerHTML = data.date;
  31.     location.innerHTML = data.city;
  33.     weatherL.innerHTML = weatherIcon(1);
  34.     weatherTemp.innerHTML = data.weather[0].temp.slice(0, 3) + "℃";
  35.     weatherDesc.innerHTML = data.weather[0].weather;
  37.     //判断是否有pm25
  38.     if (data.pm25) { 
  39.         pm.innerHTML = data.pm25;
  40.     } else { 
  41.         pm.innerHTML = "暂无";
  42.     }
  44.     humidity.innerHTML = "暂无";
  45.     wind.innerHTML = data.weather[0].wind;
  46.     // 封装判断天气的一个函数
  47.     // t 第几天
  48.     function weatherIcon(t) { 
  49.         if (data.weather[t - 1].icon1.search("duoyun") != -1) { 
  50.             return "";
  51.         }
  52.         if (data.weather[t - 1].icon1.search("yin") != -1) { 
  53.             return "";
  54.         }
  55.         if (data.weather[t - 1].icon1.search("qing") != -1) { 
  56.             return "";
  57.         }
  58.         if (data.weather[t - 1].icon1.search("xiaoyu") != -1) { 
  59.             return "";
  60.         }
  61.         if (data.weather[t - 1].icon1.search("zhongyu") != -1) { 
  62.             return "";
  63.         }
  64.         if (data.weather[t - 1].icon1.search("dayu") != -1 || data.weather[0].icon1.search("baoyu") != -1) { 
  65.             return "";
  66.         }
  67.         if (data.weather[t - 1].icon1.search("leizhenyu") != -1) { 
  68.             return "";
  69.         }
  70.         if (data.weather[t - 1].icon1.search("zhenyu") != -1) { 
  71.             return "";
  72.         }
  74.         if (data.weather[t - 1].icon1.search("zhongxue") != -1) { 
  75.             return "";
  76.         }
  77.         if (data.weather[t - 1].icon1.search("zhongxuezhuandaxue") != -1) { 
  78.             return "";
  79.         }
  80.         if (data.weather[t - 1].icon1.search("zhenxue") != -1) { 
  81.             return "";
  82.         }
  83.         if (data.weather[t - 1].icon1.search("yangsha") != -1) { 
  84.             return "";
  85.         }
  86.         if (data.weather[t - 1].icon1.search("xiaoxue") != -1) { 
  87.             return "";
  88.         }
  89.         if (data.weather[t - 1].icon1.search("xiaoxuezhuanzhongxue") != -1) { 
  90.             return "";
  91.         }
  92.         if (data.weather[t - 1].icon1.search("mai") != -1) { 
  93.             return "";
  94.         }
  95.         if (data.weather[t - 1].icon1.search("shachenbao") != -1) { 
  96.             return "";
  97.         }
  98.         if (data.weather[t - 1].icon1.search("fuchen") != -1) { 
  99.             return "";
  100.         }
  101.         if (data.weather[t - 1].icon1.search("daxue") != -1) { 
  102.             return "";
  103.         }
  104.         if (data.weather[t - 1].icon1.search("daxuezhuanbaoxue") != -1) { 
  105.             return "";
  106.         }
  107.         if (data.weather[t - 1].icon1.search("baoxue") != -1) { 
  108.             return "";
  109.         }
  111.     }
  113.     span1[0].innerHTML = weatherIcon(1);
  114.     span1[1].innerHTML = data.weather[0].date.slice(0, 3);
  115.     span1[2].innerHTML = data.weather[0].temp;
  117.     span2[0].innerHTML = weatherIcon(2);
  118.     span2[1].innerHTML = data.weather[1].date.slice(0, 3);
  119.     span2[2].innerHTML = data.weather[1].temp;
  121.     span3[0].innerHTML = weatherIcon(3);
  122.     span3[1].innerHTML = data.weather[2].date.slice(0, 3);
  123.     span3[2].innerHTML = data.weather[2].temp;
  125.     span4[0].innerHTML = weatherIcon(4);
  126.     span4[1].innerHTML = data.weather[3].date.slice(0, 3);
  127.     span4[2].innerHTML = data.weather[3].temp;
  132. }
  134. window.onload = function() { 
  136.     var btn = document.getElementById("location-button");
  137.     var city = document.getElementById("city");
  139.     var oldScript = document.createElement("script");
  140.     oldScript.src = `https://api.asilu.com/weather/?city=${ "开封"}&callback=weather`;
  141.     //插入到页面中去
  142.     document.body.appendChild(oldScript);
  144.     btn.onclick = function() { 
  145.         // 加个简单判断，输入内容是否为空
  146.         if (city.value) { 
  147.             var newScript = document.createElement("script");
  148.             newScript.src = `https://api.asilu.com/weather/?city=${ city.value}&callback=weather`;
  150.             //插入到页面中去
  151.             document.body.replaceChild(newScript, oldScript);
  152.             oldScript = newScript;
  153.         } else { 
  154.             alert("请输入城市名称!");
  155.         }
  156.     }
  157. }

没事可以来看看，万一有收获呢。

个人博客地址https://aqingya.cn

愿你的坚持终有回报。

发表评论

表情：
评论列表 （有 0 条评论，54人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android 天气预报

    从开始到完成基本功能差不多一个星期 因为不知道怎么入手和很多导包的问题 在这个项目里我第一次用了线程 网络请求 json解析 所以觉得还是挺有意义的 我在写的时候没

    绝地灬酷狼绝地灬酷狼/ 0 赞/ 384 阅读