Weather API 天气应用 API调用分享

Weather API 分享
链接：https://openweathermap.org/api

注册默认是One Call API 3.0 适合学生项目练手
提供以下天气数据：

当前天气
每小时、分钟预报
48小时每小时预报
8天每日预报
国家天气警报
历史天气数据（自 1979 年 1 月 1 日起）

如何调用API？

// 步骤如下：
// 1. 注册账号，获得API Key
// 2. 粘贴下方 API Calls
// 3. {API key} 更改为自己的API key即可
https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key}

如果您也想做类似网页版天气搜索，请继续往下看吧～

登录页面
搜索页面展示
404 NOT FOUND Page
如果不喜欢，您可以任意更改图片样式～

下面是 HTML代码

<!DOCTYPE html>
<html lang="en">
<head><!-- Fontawesome Icons v6.2.0 --><script src="https://kit.fontawesome.com/7c8801c017.js" crossorigin="anonymous"></script><!-- Roboto Font --><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet"><!-- CSS File --><link rel="stylesheet" href="css/style.css"></head><body><div class="container"><div class="search-box"><i class="fa-solid fa-location-dot"></i><input type="text" placeholder="Enter Your Location"><button class="fa-solid fa-magnifying-glass"></button></div><div class="not-found"><img src="data:images/404.png" alt="..."><p>Oops! Invalid Location :/</p></div><div class="weather-box"><img src="" alt="..."><p class="temperature"></p><p class="description"></p></div><div class="weather-details"><div class="humidity"><i class="fa-solid fa-water"></i><div class="text"><span></span><p>Humidity</p></div></div><div class="wind"><i class="fa-solid fa-wind"></i><div class="text"><span></span><p>Wind Speed</p></div></div></div></div><!-- JS File --><script src="js/script.js" type="text/javascript"></script>
</body></html>

下面是 CSS代码

* {margin: 0;padding: 0;border: 0;outline: 0;box-sizing: border-box;
}body {height: 100vh;display: flex;align-items: center;justify-content: center;background: #678699;  <!-- 更改整体背景颜色--!>}.container {position: relative;width: 400px;height: 105px;background: #fff;padding: 28px 32px;overflow: hidden;border-radius: 18px;font-family: 'Roboto', sans-serif;transition: .6s ease-out;
}.search-box {width: 100%;height: min-content;display: flex;align-items: center;justify-content: space-between;
}.search-box input {color: #06283D;width: 80%;font-size: 24px;font-weight: 500;text-transform: uppercase;padding-left: 32px;
}.search-box input::placeholder {font-size: 20px;font-weight: 500;color: #06283D;text-transform: capitalize;
}.search-box button {cursor: pointer;width: 50px;height: 50px;color: #06283D;background: #DFF6FF;border-radius: 50%;font-size: 22px;transition: .4s ease;
}.search-box button:hover {color: #fff;background: #06283Ddc;
}.search-box i {position: absolute;color: #06283Ddc;font-size: 28px;
}.weather-box {text-align: center;
}.weather-box img {width: 60%;margin-top: 30px;
}.weather-box .temperature {position: relative;color: #06283D;font-size: 4rem;font-weight: 800;margin-top: 30px;margin-left: -16px;
}.weather-box .temperature span {position: absolute;margin-left: 4px;font-size: 1.5rem;
}.weather-box .description {color: #06283Ddc;font-size: 22px;font-weight: 500;text-transform: capitalize;
}.weather-details {width: 100%;display: flex;justify-content: space-between;margin-top: 30px;
}.weather-details .humidity,
.weather-details .wind {display: flex;align-items: center;width: 50%;height: 100px;
}.weather-details .humidity {padding-left: 20px;justify-content: flex-start;
}.weather-details .wind {padding-right: 20px;justify-content: flex-end;
}.weather-details i {color: #06283Ddc;font-size: 26px;margin-right: 10px;margin-top: 6px;
}.weather-details span {color: #06283D;font-size: 22px;font-weight: 500;
}.weather-details p {color: #06283Ddc;font-size: 14px;font-weight: 500;
}.not-found {width: 100%;text-align: center;margin-top: 50px;scale: 0;opacity: 0;display: none;
}.not-found img {width: 70%;
}.not-found p {color: #06283Ddc;font-size: 22px;font-weight: 500;margin-top: 12px;
}.weather-box,
.weather-details {scale: 0;opacity: 0;
}.fadeIn {animation: .5s fadeIn forwards;animation-delay: .5s;
}@keyframes fadeIn {to {scale: 1;opacity: 1;}
}

下面是 JavaScript 代码

const container = document.querySelector('.container');
const search = document.querySelector('.search-box button');
const weatherBox = document.querySelector('.weather-box');
const weatherDetails = document.querySelector('.weather-details');
const error404 = document.querySelector('.not-found');search.addEventListener('click', () => {const APIKey = '输入APIKey;const city = document.querySelector('.search-box input').value;if (city === '')return;fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${APIKey}`).then(response => response.json()).then(json => {if (json.cod === '404') {container.style.height = '400px';weatherBox.style.display = 'none';weatherDetails.style.display = 'none';error404.style.display = 'block';error404.classList.add('fadeIn');return;}error404.style.display = 'none';error404.classList.remove('fadeIn');const image = document.querySelector('.weather-box img');const temperature = document.querySelector('.weather-box .temperature');const description = document.querySelector('.weather-box .description');const humidity = document.querySelector('.weather-details .humidity span');const wind = document.querySelector('.weather-details .wind span');switch (json.weather[0].main) {case 'Clear':image.src = 'images/clear.png';break;case 'Rain':image.src = 'images/rain.png';break;case 'Snow':image.src = 'images/snow.png';break;case 'Clouds':image.src = 'images/cloud.png';break;case 'Haze':image.src = 'images/mist.png';break;default:image.src = '';}temperature.innerHTML = `${parseInt(json.main.temp)}<span>°C</span>`;description.innerHTML = `${json.weather[0].description}`;humidity.innerHTML = `${json.main.humidity}%`;wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`;weatherBox.style.display = '';weatherDetails.style.display = '';weatherBox.classList.add('fadeIn');weatherDetails.classList.add('fadeIn');container.style.height = '590px';});});

图片自取
备注：尺寸70 X 70

clear.png
snow.png
mist.png
cloud.png
rain.png

Weather API 天气应用 API调用分享相关推荐

php调用天气预报接口,PHP调用百度天气接口API实现查询实时天气
现在,不用守着晚上7点半的时间去看第二天的天气预报,只要你有手机,有网络,便可以轻松查询实时天气,可你知道怎么用PHP实现的吗?本文将带大家学习一种调用百度天气接口的方式,直接在PHP上查看实时天气, ...
php 百度天气接口api接口,PHP调用百度天气接口API实现查询实时天气
现在,不用守着晚上7点半的时间去看第二天的天气预报,只要你有手机,有网络,便可以轻松查询实时天气,可你知道怎么用PHP实现的吗?本文将带大家学习一种调用百度天气接口的方式,直接在PHP上查看实时天气, ...
基于C#的全国天气查询API调用代码实例
全国天气查询API:https://www.juhe.cn/docs/api/id/39 基于C#的全国天气查询API调用代码实例 using System; using System.Collect ...
免费的天气查询api接口调用
经过查找,找到一个免费的天气接口api ,现在提供给大家使用. 天气接口api 地址:http://wthrcdn.etouch.cn/weather_mini?city=城市名称调用实例:输入参数 ...
Unity 接入高德开放API - 天气查询
接入接口前首先申请应用密钥Key,登录高德开发者开放平台,创建应用,获取密钥. 天气查询API服务地址:https://restapi.amap.com/v3/weather/weatherInfo? ...
气象接口返回图标_中国天气网API接口
这三个已经停用,数据不再更新,即使修改Referer,得到的已经不是正确的信息. 官网提供的API 一.调用规范规范用于指导三方合作伙伴合理调用指数.3天常规预报(24小时)预报服务数据. 请求方式 ...
android百度天气接口api接口,百度天气接口api
百度天气接口以GET形式提交,返回JSON或XML URL:http://api.map.baidu.com/telematics/v3/weather?location={城市名}&out ...
Android利用高德天气查询API实现天气查询功能
主要功能: 登录.注册(需要有Web端):这个很好写,我使用SpringBoot搭建的Web端,配置好Mybatis,编写Dao层.Service层和Controller层就基本完成了. 首页显示 ...
Py：利用pickle模块和API天气接口实现输入城市得到该城市的天气预报
Py:利用pickle模块和API天气接口实现输入城市得到该城市的天气预报目录输出结果实现代码输出结果实现代码 # -*- coding: utf-8 -*- ''' Created on ...

Weather API 天气应用 API调用分享

Weather API 天气应用 API调用分享相关推荐

最新文章

热门文章