天气预报

来源：互联网发布：wocom 手绘板 mac 编辑：程序博客网时间：2024/06/15 10:42

<!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">  <td>{{item.date}}</td> <td><imgng-src="{{item.dayPictureUrl}}"alt=""></td> <td><imgng-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>

阅读全文

0 0