如何在一个页面中显示当前城市的天气

最新推荐文章于 2022-12-16 17:26:24 发布
最新推荐文章于 2022-12-16 17:26:24 发布
阅读量626 收藏 6
点赞数 2
分类专栏： vue.js 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44774831/article/details/115587313
版权

问题：
有时候页面太单调了，我们需要显示一些有趣实时有用的东西，天气显示确实是个好东西…
问题解决：

  • 去网站中生成我们喜欢的样式的天气代码

首先我们去这样网站可以直接生成免费的代码iframe，操作过程如图：
网站.https://www.tianqi.com/chengdu/?tq
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 放在一个div盒子中，调节样式即可
// 在一个div盒子中封装这样的天气iframe
<div class="weather">
   <iframe name="weather_inc" style="margin-left: 25%;margin-top:-1%; width: 100%;height: 100%"
    src="http://i.tianqi.com/index.php?c=code&id=11&num=1&color=%23FFFFFF&icon=1&site=12"  
    frameborder="0" scrolling="no">
   </iframe>
</div>
sing__star
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
教你利用iframe在网页中显示天气
淡忘~浅思
10-05 4211
css： 1: *{margin:0;padding:0;list-style-type:none;} 2: a,img{border:0;} 3: body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} 4: 5: /* demo */ 6: .demo{width:800px;margin:0 auto;} 7: .demo div{margin:40px 0 0 0;} html：
在网页中加入天气
MyNameIsXiaoLai的博客
12-08 1500
https://blog.csdn.net/yerongtao/article/details/72547859 版权声明：本文为博主原创文章，未经博主允许不得转载。    https://blog.csdn.net/yerongtao/article/details/72547859 本文主要介绍：如何在自己的网页中加入天气预报 1、现在有很多网站已经给我们提供了很多很好的API供我们使用，...
实例——输入城市显示该城市的天气信息
weixin_47741303的博客
05-15 310
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <script src="https://cdn.staticfile.
好用的前端天气插件iframe
九九八拾一的博客
03-27 4288
（1）天气网：http://www.tianqi.com/plugin/ （2）中国天气网：https://cj.weather.com.cn/ （3）天气API：http://www.tianqiapi.com/
html div添加天气,web前端入门到实战：纯CSS写一个动态太阳的天气图标
weixin_42443651的博客
06-04 413
效果效果图如下实现思路div实现太阳的一条矩形光影before伪元素制作另一条光影矩形，和已有的转变90°after伪元素画个圆实现太阳样式dom结构用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写太阳的一条光影矩形的样式。css样式1、定义父容器样式，控制图标位置，顺便给整个页面加个背景色，方便预览body{background: rgba(73, 74, 95, 1);}.co...
Weather_Forecast:天气预报网络应用程序，显示城市当前的天气
04-21
在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行...
天气地狱：显示给定城市天气的应用程序
02-09
目的是创建一个视图以显示从API获得的数据。 技术领域 HTML CSS 引导程序 角度的 打字稿 节点 要求 节点 为了开发此应用程序，使用的Node版本为12.0.0，因为它与需要npm版本6的Angular兼容。 要更改节点版本，请...
工具栏天气：此扩展程序将在您的工具栏中显示当前天气和摄氏温度，单击可能时可查看有关城市天气的更多详细信息
02-05
工具栏天气 该加载项在您的工具栏中显示当前的天气和摄氏或华氏度，单击可能会看到有关您所在城市天气的更多详细信息，您还可以查看未来24小时和48小时的天气预报并调整显示首选项。要求Firefox 63.0或更高版本产品...
使用JS在页面前端获取天气预报
04-25
val 城市 day : 0 password : "DJOYnieT8234jlsK" } function json { $ "#weatherinfo" html "<img src "weather "+ status1 +" gif" style "...
weather-app:该应用程序显示当前天气以及任何给定城市的天气预报
03-20
概括这是一个使用来显示天气数据的天气应用程序。这使用Angular 11制作前端。可以在https://abhishekkrmehta.github.io/weather-app/查看演示开发服务器安装Angular CLI和Node.js导航到项目目录并运行npm install为...
vue获取当前IP所在地天气.docx
11-23
原生的vue源代码，使用vue获取当前IP，并且获取到当前所在地天气.docx，亲测有效，有问题可一直私聊我
网页中显示天气预报
CHUNZHIJIEQJQ的博客
12-16 1163
这是通过iframe来显示百度天气到自己的页面上。
分享1个爬虫小案例，还能语音播报！
算法channel
11-01 448
Python与算法社区已原创422篇，干货满满值得星标010203三步加星标 1预备知识此案例实现功能：利用网络爬虫，爬取某地的天气，并打印和语音播报。要用到requests库，lx...
html 显示天气预报,前端HTML页面获取实时天气预报并展示
weixin_35342955的博客
06-18 7356
前端HTML页面获取实时天气预报并展示昨天完成了一个实时显示天气预报的功能，今天在这完记录一下，纯前端layui和JQuery代码。没有后台交互获取用户打开页面的IP地址进行定位城市。试了很多方法都大同小异，我在这使用的是http://ip.ws.1 26.net/ipquery链接获取代码如下dynamicIp(lc);//这是获取天气调用的方法 lc就是城市名称在js代码块中这样写代码第三行的...
Androidstudio设计天气预报并且满足以下要求1.在页面上显示当前某个城市的天气信息 2.数据从网络中获得 3.对数据进行解析
最新发布
06-12
好的，那我就为您提供一份设计天气预报应用的指南，以满足您的要求。 首先，您需要选择一个天气数据API来获取天气数据。建议使用OpenWeatherMap API，它提供了免费的天气数据。您需要注册一个API密钥，并在应用中使用该密钥来访问API。 其次，您需要在您的应用中添加网络权限，在AndroidManifest.xml文件中添加以下权限： ```xml <uses-permission android:name="android.permission.INTERNET" /> ``` 接着，您需要使用Retrofit库来进行网络请求，并使用Gson库来解析JSON数据。在build.gradle文件中添加以下依赖： ```gradle implementation 'com.squareup.retrofit2:retrofit:2.9.0' implementation 'com.squareup.retrofit2:converter-gson:2.9.0' ``` 然后，您需要创建一个用于存储天气数据的Java类。例如，您可以创建一个Weather类，用于存储温度、湿度、风速、天气状况等信息。然后，您可以在您的应用中创建一个用于显示天气信息的布局。例如，您可以使用TextView来显示温度和湿度，使用ImageView来显示天气状况的图标。 接下来，您需要创建一个用于获取天气数据的接口。例如，您可以创建一个WeatherAPI接口，其中包含一个用于获取天气数据的方法。您可以使用Retrofit注解来指定API的URL和请求方式，如下所示： ```java public interface WeatherAPI { @GET("data/2.5/weather") Call<Weather> getWeather(@Query("q") String city, @Query("appid") String apiKey); } ``` 然后，您可以在您的Activity中使用Retrofit来进行网络请求，并在回调函数中处理返回的天气数据。例如，您可以在onResponse()方法中更新UI，如下所示： ```java Retrofit retrofit = new Retrofit.Builder() .baseUrl("https://api.openweathermap.org/") .addConverterFactory(GsonConverterFactory.create()) .build(); WeatherAPI weatherAPI = retrofit.create(WeatherAPI.class); Call<Weather> call = weatherAPI.getWeather("London", "your_api_key"); call.enqueue(new Callback<Weather>() { @Override public void onResponse(Call<Weather> call, Response<Weather> response) { Weather weather = response.body(); // Update UI with weather data temperatureTextView.setText(weather.getTemperature()); humidityTextView.setText(weather.getHumidity()); // Set weather icon using Glide library Glide.with(context).load(weather.getIconUrl()).into(weatherIconImageView); } @Override public void onFailure(Call<Weather> call, Throwable t) { // Handle network failure } }); ``` 希望这些指南能够帮助您设计一个能够从网络中获取天气数据、解析数据并显示在页面上的天气预报应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值