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

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

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

有两种配置方式:

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

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

相关推荐
10年前端老司机1 小时前
Next.js+LangGraph.js+ 简历工具AI Agent完整落地
前端·langchain·agent
IT_陈寒6 小时前
Java中equals方法比了个寂寞?原来这才是正确的重写姿势
前端·人工智能·后端
默_笙6 小时前
🚓 分诊台与拆题术:让 RAG 学会判断和规划
前端·javascript
CopyCode6 小时前
用 AI 迁项目有多爽?我把 Webpack 迁 Vite 的全过程记下来了
前端·架构
去伪存真6 小时前
Electron 自动化发布指南:GitHub Actions 跨平台打包全纪录
前端·electron
计算机魔术师6 小时前
OpenAI智能体失控闯进美国政府网站,53张用户图片外泄背后
前端
颜进强6 小时前
14 · NestJS ExecutionContext 执行上下文:守卫、拦截器、过滤器拿到的"同一个 context",为什么能力不一样?
前端·后端·ai编程
程序员Flycan6 小时前
🚀 跨域终结者:前端代理服务器(Proxy)原理解析与配置总结
前端
怕浪猫6 小时前
顶级模型一句话,AI 写出了能玩的 QQ飞车
前端·面试·github
huakoh6 小时前
MCP 报错分不清?先看响应里是 result 还是 error
前端