angularjs 做一个天气预报

来源：互联网发布：阿里云备案工作编辑：程序博客网时间：2024/05/13 17:49
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>天气</title>    <script src="../angular-1.5.5/angular.min.js"></script>    <script>        var u1="https://free-api.heweather.com/v5/weather?city=";        var u2;        var u3="&key=545d63e185fc48169a43cbabba6e74d2";        var my=angular.module("my",[]);        my.controller("mys",function ($scope,$http) {            $scope.city="beijing";            $scope.show=false;            $scope.search=function () {                    u2=$scope.city;                    $scope.show=true;                    $http({                        url:u1+u2+u3                    }).then(function (data) {                        $scope.cityName=data.data.HeWeather5[0].basic.city;                        $scope.date=data.data.HeWeather5[0].daily_forecast[0].date;                        $scope.mTemp=data.data.HeWeather5[0].daily_forecast[0].tmp.max;                        $scope.xTemp=data.data.HeWeather5[0].daily_forecast[0].tmp.min;                    })                $scope.city="";            };        })    </script></head><body ng-app="my" ng-controller="mys">    <input type="text" ng-model="city"/><button ng-click="search()">点击查询</button>    <ul ng-show="show">        <li>{{cityName}}</li>        <li>{{date}}</li>        <li>{{mTemp}}</li>        <li>{{xTemp}}</li>    </ul></body></html>
阅读全文
0 0