天气预报

最新推荐文章于 2020-09-07 10:35:32 发布

原创最新推荐文章于 2020-09-07 10:35:32 发布 · 214 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

	<!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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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