devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端课程设计班级网站之天气预报页面(HTML5+Css3+js+bootstrap+adjx)_天气预报界面网页设计

作者：繁依Fanyi0 | 2024-07-31 02:41:08

赞

踩

天气预报界面网页设计
  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <title>天气查询</title>
  9.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  10.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  11.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  12.     <!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
  13.     <style>
  14.         .container {
  15.             padding-top: 20px;
  16.         }
  17.         
  18.         .nav {
  19.             padding: 10px 0;
  20.         }
  21.         
  22.         .container-fluid {
  23.             position: relative;
  24.             background-color: skyblue;
  25.             width: 1400px;
  26.             height: 60px;
  27.             top: 10px;
  28.         }
  29.         
  30.         #news-list {
  31.             position: relative;
  32.             top: 15px;
  33.             left: 100px;
  34.         }
  35.         
  36.         .a0 {
  37.             margin: 0 auto;
  38.             background: url(img/21.png);
  39.             width: 1400px;
  40.             height: 2000px;
  41.         }
  42.     </style>
  43. </head>
  44.  
  45. <body>
  46.     <div class="a0">
  47.         <nav class="navbar navbar-default" role="navigation">
  48.             <div class="container-fluid">
  49.                 <div class="navbar-header">
  50.                     <a class="navbar-brand" href="#">天气查询</a>
  51.                 </div>
  52.                 <div>
  53.                     <ul class="nav navbar-nav">
  54.                         <li class="active">
  55.                             <a href="#">软件212班</a>
  56.                         </li>
  57.                         <li><a href="#">欢迎您</a></li>
  58.                         <li class="dropdown">
  59.                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  60.     菜单
  61.     <b class="caret"></b>
  62.   </a>
  63.                             <ul class="dropdown-menu">
  64.                                 <li><a href="课程设计.html">返回首页</a></li>
  65.                                 <li><a href="教学在线.html">教学在线</a></li>
  66.                                 <li><a href="班级概况.html">班级概况</a></li>
  67.                                 <li class="divider"></li>
  68.                                 <li><a href="留言板2.html">建议评论</a></li>
  69.                                 <li class="divider"></li>
  70.                                 <li><a href="天气预报.html">天气查询</a></li>
  71.                             </ul>
  72.                         </li>
  73.                     </ul>
  74.                 </div>
  75.             </div>
  76.         </nav>
  77.         <div class="container">
  78.             <h1>天气预报</h1>
  79.             <div class="form-inline nav">
  80.                 <div class="form-group">
  81.                     <input type="text" class="form-control" id="province" placeholder="请输入省份" value="">
  82.                 </div>
  83.                 <div class="form-group">
  84.                     <input type="text" class="form-control" id="city" placeholder="请输入城市" value="">
  85.                 </div>
  86.                 <button type="submit" class="btn btn-default" id="btn">搜索</button>
  87.             </div>
  88.  
  89.             <table class="table table-striped table-hover" align="center" id="box"></table>
  90.         </div>
  91.     </div>
  92. </body>
  93.  
  94. <script src="./js/jsonp.js"></script>
  95. <script src="./js/template-web.js"></script>
  96.  
  97. <!-- 创建一个模板引擎 -->
  98. <script type="text/html" id="tpl">
  99.     <tr>
  100.         <th>时间</th>
  101.         <th>温度</th>
  102.         <th>天气</th>
  103.         <th>风向</th>
  104.         <th>风力</th>
  105.     </tr>
  106.  
  107.     {{each info}}
  108.     <tr>
  109.         <td>{{date($value.update_time)}}</td>
  110.         <td>{{$value.degree}}</td>
  111.         <td>{{$value.weather}}</td>
  112.         <td>{{$value.wind_direction}}</td>
  113.         <td>{{$value.wind_power}}</td>
  114.     </tr>
  115.     {{/each}}
  116.  
  117. </script>
  118.  
  119. <script>
  120.     // 获取table容器
  121.     var table = document.getElementById('box')
  122.  
  123.     // 获取搜索按钮
  124.     var btn = document.getElementById('btn')
  125.  
  126.     // 获取用户输入的省份
  127.     var province = document.getElementById('province');
  128.  
  129.     // 获取用户输入的城市
  130.     var city = document.getElementById('city');
  131.  
  132.     // 定义dateFormat方法
  133.     function dateFormat(data) {
  134.         // 获取年，月，日，时，分，秒
  135.         var year = data.substr(0, 4)
  136.         var month = data.substr(4, 2)
  137.         var day = data.substr(6, 2)
  138.         var hour = data.substr(8, 2)
  139.         var minuter = data.substr(10, 2)
  140.         var sec = data.substr(12, 2)
  141.         return year + '年' + month + '月' + day + '日 ' + hour + '时' + minuter + '分' + sec + '秒'
  142.     }
  143.  
  144.     // 向模板中开放外部变量
  145.     // 固定写法template.defaults.import.XX = dateFormat(方法名)
  146.     template.defaults.imports.date = dateFormat
  147.  
  148.     // 点击搜索按钮触发事件
  149.     btn.onclick = function() {
  150.         // 获取用户输入的省份，城市的值
  151.         province = province.value;
  152.         city = city.value
  153.  
  154.         // 调用jsonp方法
  155.         jsonp({
  156.             url: 'https://wis.qq.com/weather/common',
  157.             data: {
  158.                 source: 'pc',
  159.                 weather_type: 'forecast_1h',
  160.                 province: province,
  161.                 city: city,
  162.             },
  163.             success: function(data) {
  164.                 // 使用模板引擎
  165.                 var html = template('tpl', {
  166.                         info: data.data.forecast_1h
  167.                     })
  168.                     // 把拼接好的字符串放入table容器中
  169.                 table.innerHTML = html
  170.             }
  171.         })
  172.     }
  173. </script>
  174.  
  175. </html>

 

 

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号