<!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> |
天气预报
最新推荐文章于 2024-05-10 15:53:22 发布