前端免费高效的接入天气组件(天气网),控制组件的样式

天气预报代码_天气预报插件_免费天气预报代码(插件)调用------天气网

在天气网的官网中提供了对应的组件样式,样式多种支持。

有两种配置方式:

1.自定义城市天气:

在前端嵌入对应的iframe

XML 复制代码
<iframe width="400" height="100" src="https://i.tianqi.com/?c=code&a=getcode&id=35&py=shanghai&site=34&icon=1" frameborder="0"></iframe>

这里的py对应的参数就是城市,这个可以从后端获取。

2.自动通过ip获取当前所在城市的天气:

XML 复制代码
<iframe width="400" height="100" src="https://i.tianqi.com/?c=code&a=getcode&id=35&site=34&icon=1" frameborder="0"></iframe>

其他参数说明:

id: 官网组件中的对应具体组件样式的id

site:显示的字体大小

color:显示的文本颜色(%23FFFFFF),这个的颜色#要用%23代替,不然可能不生效。

border:solid 1px #7ec8ea 边框的设置

icon:对应天气样式的图标风格。

可以再需要的地方进行配置就可以显示了。

相关推荐
hunterandroid1 小时前
RecyclerView 进阶:DiffUtil 与列表更新
前端
_codeOH1 小时前
Vue 3 vs React 19:框架还在卷,核心原理就这些
前端·vue.js
the_answer1 小时前
CSS 新时代:浏览器原生能力如何重塑前端开发范式
前端
不会写DN1 小时前
固定背景图不随页面滚动的完美方案
前端
天蓝色的鱼鱼1 小时前
Vite 8 换上 Rolldown 后,前端构建真的会快很多吗?
前端·vite
梦曦i2 小时前
全面解析uni-router v1.2.0功能
前端·uni-app
Yiyaoshujuku2 小时前
化学谱图数据API接口,数据字段一览!
linux·服务器·前端
雮尘2 小时前
LangGraph 与 LangSmith 入门教程(JS/TS 版)
前端·人工智能·langchain
英勇无比的消炎药2 小时前
新手必看玩转TinyRobot一定要避开这些坑
前端·vue.js