首页 > 语言 > JavaScript > 正文

angularjs实现天气预报功能

2024-05-06 15:25:20
字体:
来源:转载
供稿:网友

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持错新站长站。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选