天气预报

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
  
 .box {
 position: relative;
 width: 600px;
 height: 400px;
 margin: 0 auto;
 }
 .chaxun {
 background-color: rgba(255,255,255,0.1);
 position: absolute;
 top:30px;
 left: 50px;
 /*float: left;*/
 }
 .bgimg {
 width: 600px;
 }
 </style>
  
 </head>
 <body ng-app="App">
  
 <div ng-controller="WeatherController" class="box" >
 <img src="images/n-bg1.jpg" class="bgimg">
 <div class="chaxun">
 <input type="text" ng-model="text">
 <button ng-click="cha()">查询当前位置天气</button>
 <table>
 <!-- 视图 -->
 <p>当前时间是:{{time|date:'yyyy-MM-dd hh:mm:ss'}}</p>
 <tr ng-repeat="item in weatherData">
 <!-- <p>你的位置:{{currentCity}}</p> -->
 <td>{{item.date}}</td>
 <td><img ng-src="{{item.dayPictureUrl}}" alt=""></td>
 <td><img ng-src="{{item.nightPictureUrl}}" alt=""></td>
 <td>{{item.temperature}}</td>
 <td>{{item.weather}}</td>
 <td>{{item.wind}}</td>
 </tr>
 </table>
 </div>
 </div>
 <script src="angular-1.3.0.js"></script>
 <script>
 var App = angular.module('App', []);
 // 定义控制器并声明依赖
 App.controller('WeatherController', ['$scope', '$http', '$interval', function($scope, $http, $interval) {
 // 页面显示当前时间
 $interval(function(){
 $scope.time = new Date();
 },1000);
 // 查询各个城市的天气
 $scope.text = '吉林';//初始化输入框的参数
 $scope.cha = function(){
 $http({
 method: 'jsonp', // 支持jsonp,
 url: 'http://api.map.baidu.com/telematics/v3/weather?callback=JSON_CALLBACK',
 params: { // 请求的参数
 location: $scope.text,
 output: 'json',
 ak: '0A5bc3c4fb543c8f9bc54b77bc155724'
 }
 }).success(function (data) {
 // 请求回的数据放到模型上
 $scope.currentCity = data.results[0].currentCity;
 $scope.weatherData = data.results[0].weather_data;
 });
  
 }
  
  
 }]);
  
  
  
 </script>
 </body>
 </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值