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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python实现图片文件批量重命名
2020/03/23 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
利用python画出AUC曲线的实例
2020/02/28 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
行政助理的职责
2013/11/14 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书