angularjs实现天气预报功能


Posted in Javascript onJune 16, 2020

本文实例为大家分享了angularjs实现天气预报的具体代码,供大家参考,具体内容如下

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
js重写方法的简单实现
Jul 10 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
angular.js实现购物车功能
Oct 23 #Javascript
使用store来优化React组件的方法
Oct 23 #Javascript
node文件批量重命名的方法示例
Oct 23 #Javascript
详解vue 实例方法和数据
Oct 23 #Javascript
深入浅析javascript继承体系
Oct 23 #Javascript
Vue.js组件通信的几种姿势
Oct 23 #Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 #Javascript
You might like
php数字转汉字代码(算法)
2011/10/08 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
PHP getName()函数讲解
2019/02/03 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python生成式的send()方法(详解)
2017/05/08 Python
详解Python文本操作相关模块
2017/06/22 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Anaconda入门使用总结
2018/04/05 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
python语言是免费还是收费的?
2020/06/15 Python
python线性插值解析
2020/07/05 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
介绍下java.util.Arrays类
2012/10/16 面试题
新郎父亲婚宴答谢词
2014/01/11 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
放弃继承权公证书
2015/01/23 职场文书
人事任命通知书
2015/04/21 职场文书
找规律教学反思
2016/02/23 职场文书