资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/HTML5 天气预报应用

HTML5 天气预报应用

hankkin / 2819人阅读

摘要：实现输入城市名称，通过的来获取当前城市的天气情况。页面展示效果代码北京

jQuery实现输入城市名称，通过yahoo的Weather API来获取当前城市的天气情况。
页面展示效果：

HTML

</>复制代码 
  2.  
  3.  
  6.  
  7.     
  8.         
  9.             
    C
  10.             
  11.                     
  12.                 
  13.                 
  15.                     
  16.                     
  17.                     
  18.                 
  19.                 
  21.                     
  22.                     
  23.                     
  24.                 
  25.                 
  27.                     
  28.                     
  29.                     
  30.                 
  31.                 
  33.                     
  34.                     
  35.                     
  36.                 
  37.               
  38.             
  39.         
  40.

CSS

</>复制代码 
  1. html,
  2. body {
  3.     background-color: #F5F8FC;
  4.     height: 100%;
  5.     width: 100%;
  6.     overflow: hidden;
  7.     font-family: "Open Sans", sans-serif;
  8. }
  9. .info p {
  10.     text-align: center;
  11.     margin: 10px auto 0px auto;
  12.     width: 540px;
  13.     color: #4c4c4c;
  14.     font-size: 16px;
  15.     font-weight: bold;
  16. }
  17. .wrapper {
  18.     position: absolute;
  19.     left: 0;
  20.     right: 0;
  21.     top: 0;
  22.     bottom: 0;
  23.     margin: auto;
  24.     max-width: 100%;
  25.     max-height: 100%;
  26.     overflow: auto;
  27.    
  28.     height: 500px;
  29.     
  30. }
  31. .shadow {
  32.     -webkit-box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);
  33.     -moz-box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);
  34.     box-shadow: 0px 30px 100px 1px rgba(180, 180, 180, 1);
  35. }
  36. .top {
  37.     position: relative;
  38.     z-index: 0;
  39.     background-color: #61c3e6;
  40.     height: 300px;
  41.     overflow: hidden;
  42.     text-align: center;
  43.     display: inline-block;
  44.     width: 100%;
  45.     float: left;
  46. }
  47. .top .btn {
  48.     text-align: center;
  49.     line-height: 25px;
  50.     position: absolute;
  51.     color: white;
  52.     font-weight: bold;
  53.     font-size: 20px;
  54.     border-radius: 50%;
  55.     border: 1px solid white;
  56.     top: 5px;
  57.     left: 740px;
  58.     cursor: pointer;
  59.     text-transform: uppercase;
  60. }
  61. .top img {
  62.     position: relative;
  63.     z-index: -1;
  64.     margin-top: -10px;
  65.     margin-bottom: 10px;
  66.     width: 275px;
  67.     -webkit-filter: invert(100%);
  68.     -moz-filter: invert(100%);
  69.     filter: invert(100%);
  70. }
  71. .top .deg {
  72.     font-weight: bold;
  73. }
  74. .top .text {
  75.     text-align: center;
  76.     color: white;
  77.     margin-bottom: 15px;
  78.     margin-top: -70px;
  79.     font-size: 25px;
  80. }
  81. .top .text-city{
  82.     text-align: center;
  83.     color: white;
  84.     margin-bottom: 10px;
  85.     font-size: 25px;
  86. }
  87. .top input {
  88.     position: relative;
  89.     z-index: 1;
  90.     font-family: "Open Sans", sans-serif;
  91.     width: 210px;
  92.     background-color: rgba(0, 0, 0, 0);
  93.     border-top: 0px;
  94.     border-right:0px;
  95.     border-left:0px;
  96.     border-bottom:1px solid #F5F8FC;
  97.     outline: 0;
  98. }
  99. .top input:focus {
  100.     outline: 0;
  101.     border: 0px;
  102. }
  103. .bot {
  104.     float: left;
  105.     background-color: white;
  106.     height: 200px;
  107.     overflow: hidden;
  108.     display: inline-block;
  109.     width: 100%;
  110. }
  111. .bot ul {
  112.     overflow: hidden;
  113.     display: inline-block;
  114.     width: 100%;
  115.     height: 100%;
  116.     list-style-type: none;
  117.     padding-top: 30px;
  118. }
  119. .bot ul li {
  120.     color: #999999;
  121.     float: left;
  122.     width: 20%;
  123.    
  124.     text-align: center;
  125. }
  126. .bot ul li:nth-child(1) {
  127.     color: #4c4c4c;
  128. }
  129. .bot ul li h1 {
  130.     text-transform: uppercase;
  131.     font-weight: bold;
  132. }
  133. .bot ul li p {
  134.     font-weight: bold;
  135. }
  136. .bot ul li img {
  137.     -webkit-filter: invert(60%);
  138.     -moz-filter: invert(60%);
  139.     filter: invert(60%);
  140. }
  141. .bot ul li:first-child img {
  142.     -webkit-filter: invert(30%);
  143.     -moz-filter: invert(30%);
  144.     filter: invert(30%);
  145. }

javascript代码

</>复制代码 
  1. var baseYahooURL = "https://query.yahooapis.com/v1/public/yql?q="
  2. var selectedCity = "北京";
  3. var placeholder = "";
  4. var unit = "c";
  5. $(function(){
  6.   init();
  7. })
  8.   
  9. function init() {
  10.     getWoeid(selectedCity);
  11.     $("#city").keypress(function() {
  12.         if (event.which == 13) {
  13.             selectedCity = $("#city").val();
  14.             getWoeid(selectedCity);
  15.             $("#city").blur();
  16.         }
  17.     });
  18.     $("#btn").click(function() {
  19.         if ($("#btn").html() == "F") {
  20.             unit = "c";
  21.         } else unit = "f";
  22.         $("#btn").html(unit.toUpperCase());
  23.         getWoeid(selectedCity);
  24.     })
  25.     $("#city").focus(function(event) {
  26.         placeholder = $("#city").val();
  27.         $("#city").val("");
  28.         $("#city").css("border-bottom", "1px solid #F5F8FC");
  29.     });
  30.     $("#city").blur(function(event) {
  31.         if ($("#city").val() == "") {
  32.             $("#city").val(placeholder);
  33.         }
  34.     });
  35. }
  36. function getWoeid(city) {
  37.     var woeidYQL = "select woeid from geo.placefinder where text="" + city + ""&format=json";
  38.     var jsonURL = baseYahooURL + woeidYQL;
  39.     $.getJSON(jsonURL, woeidDownloaded);
  40. }
  41. function woeidDownloaded(data) {
  42.     var woeid = null;
  43.     if (data.query.count <= 0) {
  44.         $("#city").val("No city found");
  45.         $("#deg").html("");
  46.         setImage(999, $("#big")[0]);
  47.         for (var i = 0; i <= 4; i++) {
  48.             $("#forecast" + i).html("");
  49.             setImage(999, $("#forecastimg" + i)[0]);
  50.             $("#forecastdeg" + i).html("");
  51.         }
  52.         return;
  53.     } else if (data.query.count == 1) {
  54.         woeid = data.query.results.Result.woeid;
  55.     } else {
  56.         woeid = data.query.results.Result[0].woeid;
  57.     }
  58.     getWeatherInfo(woeid);
  59. }
  60. function getWeatherInfo(woeid) {
  61.     var weatherYQL = "select * from weather.forecast where woeid=" + woeid + " and u = "" + unit + "" &format=json";
  62.     var jsonURL = baseYahooURL + weatherYQL
  63.     $.getJSON(jsonURL, weaterInfoDownloaded);
  64. }
  65. function weaterInfoDownloaded(data) {
  66.     $("#city").val(selectedCity);
  67.     //$("#city").val(data.query.results.channel.location.city);
  68.     $("#deg").html(data.query.results.channel.item.condition.temp + " °" + unit.toUpperCase());
  69.     setImage(data.query.results.channel.item.condition.code, $("#big")[0]);
  70.     for (var i = 0; i <= 4; i++) {
  71.         var fc = data.query.results.channel.item.forecast[i];
  72.         $("#forecast" + i).html(fc.day);
  73.         setImage(fc.code, $("#forecastimg" + i)[0]);
  74.         $("#forecastdeg" + i).html((parseInt(fc.low) + parseInt(fc.high)) / 2 + " °" + unit.toUpperCase());
  75.     }
  76. }
  77. function setImage(code, image) {
  78.     image.src = "http://www.hubwiz.com/course/55a60445a164dd0d75929fbd/";
  79.     switch (parseInt(code)) {
  80.         case 0:
  81.             image.src += "images/icons/Tornado.svg"
  82.             break;
  83.         case 1:
  84.             image.src += "images/icons/Cloud-Lightning.svg"
  85.             break;
  86.         case 2:
  87.             image.src += "images/icons/Wind.svg"
  88.             break;
  89.         case 3:
  90.             image.src += "images/icons/Cloud-Lightning.svg"
  91.             break;
  92.         case 4:
  93.             image.src += "images/icons/Cloud-Lightning.svg"
  94.             break;
  95.         case 5:
  96.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  97.             break;
  98.         case 6:
  99.             image.src += "images/icons/Cloud-Rain-Alt.svg"
  100.             break;
  101.         case 7:
  102.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  103.             break;
  104.         case 8:
  105.             image.src += "images/icons/Cloud-Drizzle-Alt.svg"
  106.             break;
  107.         case 9:
  108.             image.src += "images/icons/Cloud-Drizzle-Alt.svg"
  109.             break;
  110.         case 10:
  111.             image.src += "images/icons/Cloud-Drizzle-Alt.svg"
  112.             break;
  113.         case 11:
  114.             image.src += "images/icons/Cloud-Drizzle-Alt.svg"
  115.             break;
  116.         case 12:
  117.             image.src += "images/icons/Cloud-Drizzle-Alt.svg"
  118.             break;
  119.         case 13:
  120.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  121.             break;
  122.         case 14:
  123.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  124.             break;
  125.         case 15:
  126.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  127.             break;
  128.         case 16:
  129.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  130.             break;
  131.         case 17:
  132.             image.src += "images/icons/Cloud-Hail-Alt.svg"
  133.             break;
  134.         case 18:
  135.             image.src += "images/icons/Cloud-Hail-Alt.svg"
  136.             break;
  137.         case 19:
  138.             image.src += "images/icons/Cloud-Hail-Alt.svg"
  139.             break;
  140.         case 20:
  141.             image.src += "images/icons/Cloud-Fog.svg"
  142.             break;
  143.         case 21:
  144.             image.src += "images/icons/Cloud-Fog.svg"
  145.             break;
  146.         case 22:
  147.             image.src += "images/icons/Cloud-Fog.svg"
  148.             break;
  149.         case 23:
  150.             image.src += "images/icons/Cloud-Fog.svg"
  151.             break;
  152.         case 24:
  153.             image.src += "images/icons/Wind.svg"
  154.             break;
  155.         case 25:
  156.             image.src += "images/icons/Thermometer-Zero"
  157.             break;
  158.         case 26:
  159.             image.src += "images/icons/Cloud.svg"
  160.             break;
  161.         case 27:
  162.             image.src += "images/icons/Cloud-Moon.svg"
  163.             break;
  164.         case 28:
  165.             image.src += "images/icons/Cloud.svg"
  166.             break;
  167.         case 29:
  168.             image.src += "images/icons/Cloud-Moon.svg"
  169.             break;
  170.         case 30:
  171.             image.src += "images/icons/Cloud-Sun.svg"
  172.             break;
  173.         case 31:
  174.             image.src += "images/icons/Moon.svg"
  175.             break;
  176.         case 32:
  177.             image.src += "images/icons/Sun.svg"
  178.             break;
  179.         case 33:
  180.             image.src += "images/icons/Moon.svg"
  181.             break;
  182.         case 34:
  183.             image.src += "images/icons/Sun.svg"
  184.             break;
  185.         case 35:
  186.             image.src += "images/icons/Cloud-Hail-Alt.svg"
  187.             break;
  188.         case 36:
  189.             image.src += "images/icons/Sun.svg"
  190.             break;
  191.         case 37:
  192.             image.src += "images/icons/Cloud-Lightning.svg"
  193.             break;
  194.         case 38:
  195.             image.src += "images/icons/Cloud-Lightning.svg"
  196.             break;
  197.         case 39:
  198.             image.src += "images/icons/Cloud-Lightning.svg"
  199.             break;
  200.         case 40:
  201.             image.src += "images/icons/Cloud-Rain.svg"
  202.             break;
  203.         case 41:
  204.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  205.             break;
  206.         case 42:
  207.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  208.             break;
  209.         case 43:
  210.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  211.             break;
  212.         case 44:
  213.             image.src += "images/icons/Cloud.svg"
  214.             break;
  215.         case 45:
  216.             image.src += "images/icons/Cloud-Lightning.svg"
  217.             break;
  218.         case 46:
  219.             image.src += "images/icons/Cloud-Snow-Alt.svg"
  220.             break;
  221.         case 47:
  222.             image.src += "images/icons/Cloud-Lightning.svg"
  223.             break;
  224.         case 3200:
  225.             image.src += "images/icons/Moon-New.svg"
  226.             break;
  227.         case 999:
  228.             image.src += "images/icons/Compass.svg"
  229.             break;
  230.         default:
  231.             image.src += "images/icons/Moon-New.svg"
  232.             break;
  233.     }
  234. }
云服务器 GPU云服务器 html5应用 html5应用上架 webrtc html5 应用案例 天气预报

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86182.html

相关文章

  • 纯 HTML+CSS+JavaScript 编写的计算器应用

    摘要：不允许再有其他文件，不允许再有单独的文件。必须支持标准的四则运算。请在收到邮件的小时内独立完成本测试，并回复本邮件。项目地址最终版的计算器，项目地址和预览图片在。并且使用单位来进行自动计算尺寸。 一道笔试题 之前偶然看到一个公司的笔试题，题目如下： 用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器 showImg(https://segmentfault....

    PiscesYE 评论0 收藏0

  • 纯 HTML+CSS+JavaScript 编写的计算器应用

    摘要：不允许再有其他文件，不允许再有单独的文件。必须支持标准的四则运算。请在收到邮件的小时内独立完成本测试，并回复本邮件。项目地址最终版的计算器，项目地址和预览图片在。并且使用单位来进行自动计算尺寸。 一道笔试题 之前偶然看到一个公司的笔试题，题目如下： 用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器 showImg(https://segmentfault....

    youkede 评论0 收藏0

  • 纯 HTML+CSS+JavaScript 编写的计算器应用

    摘要：不允许再有其他文件，不允许再有单独的文件。必须支持标准的四则运算。请在收到邮件的小时内独立完成本测试，并回复本邮件。项目地址最终版的计算器，项目地址和预览图片在。并且使用单位来进行自动计算尺寸。 一道笔试题 之前偶然看到一个公司的笔试题，题目如下： 用HTML5、CSS3、JavaScript，做一个网页，实现如下图形式计算器 showImg(https://segmentfault....

    fancyLuo 评论0 收藏0

发表评论

登陆后可评论

0条评论

hankkin

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<