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

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

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

有两种配置方式:

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:对应天气样式的图标风格。

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

相关推荐
IT_陈寒1 小时前
Vue的双向绑定把我坑惨了,原来这个场景不能用
前端·人工智能·后端
hunterandroid1 小时前
[Android 从零到一] Compose LazyColumn 性能优化:key、稳定性与重组治理
android·前端
lichenyang4532 小时前
从一次团队邀请开始:用 React、NestJS 与 Socket.IO 做可靠的实时通知
前端
vtian2 小时前
一篇文章吃透 Monorepo:pnpm + Turborepo + Changesets 全流程实战(含 8 个踩坑)
前端
默_笙2 小时前
❗ 点击计数按钮,为什么"峨眉队"也跟着重新渲染?React.memo 说:我记住了
前端·javascript
31535669132 小时前
DeepSeek Harness 发布后,我没急着跑 Demo,先把 `.agents/` 翻了一遍
前端·后端·github
名字还没想好☜2 小时前
Next.js 用 Server Components 直连数据库:去掉 API 层的边界,和三条别踩的安全红线
前端·javascript·数据库·安全·react·next.js
学习zhao极致it2 小时前
2020全新React教程全家桶实战redux+antd+React Hooks前端js视频
前端
用户921080262862 小时前
Bubble 消息操作区改造:复制、重新生成和反馈
前端
LEE2 小时前
AI Agent 都在疯狂加功能,它说:我全砍了
前端·后端