angularjs實現天氣預報功能詳解-js教程-PHP中文網

首頁

web前端

js教程

angularjs實現天氣預報功能詳解

小云云

Jan 04, 2018 am 09:43 AM

angularjs javascript 天氣預報

本文主要為大家詳細介紹了angularjs實現天氣預報功能，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助到大家。

本文實例為大家分享了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>

登入後複製

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7723

Java教學

1643

CakePHP 教程

1396

Laravel 教程

1290

PHP教程

1233

Related knowledge

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

華為手機天氣預報怎麼設定在桌面詳細講解：手機添加桌面小組件教程 Mar 02, 2024 pm 12:34 PM

自2021年12月開始華為&榮耀手機上線了萬象桌面小組件的功能。為許多用戶手機桌面添加許多便利功能、視覺優化的桌面控制等等；到今年8月兩大商家平台也開放了運動健康數據、天氣數據、音樂數據、系統數據等等，讓用戶在手機桌面的互動操作更方便快速也具備較多趣味性，讓使用者自己DIY創意組合自己的個性桌面。在添加小組件後的手機桌面最近，許多華為手機用戶反映他們對於如何在華為和榮耀手機上添加桌面小組件的操作方式不太清楚，抱怨這一過程過於復雜和繁瑣。為了幫助大家解決這個問題，錢舒嫻準備了詳細的操作流程，希望能夠

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

如何使用Java Websocket實現即時天氣預報功能？ Dec 17, 2023 pm 05:10 PM

如何使用JavaWebSocket實現即時天氣預報功能？隨著網路和行動裝置的普及，即時天氣預報功能成為了許多應用的必備功能之一。而使用JavaWebSocket技術能夠方便快速地實現即時通信，為用戶提供最新的天氣預報資訊。本文將介紹如何使用JavaWebSocket實現即時天氣預報功能，並提供具體的程式碼範例。環境準備在開始之前，需要確保你已經安裝好以

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

See all articles

angularjs實現天氣預報功能詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題