免费天气接口(7日预报和整点预报)

天气数据来自中国天气,服务器数据更新周期为1小时。

http://www.iot2ai.top/cgi-bin/intel/weather.txt?code=101280101

请求参数:

code:城市天气代码,例如101280101(广州)。其它城市代码可以在网上搜索

请求结果:

{
  "ts": 1598867562225,
  "md": "202008311700",
  "pl": "广州",
  "h3": [
    [
      "31日20时,n02,阴,30℃,无持续风向,<3级,0",
      "31日23时,n01,多云,27℃,无持续风向,<3级,0",
      "01日02时,n00,晴,27℃,无持续风向,<3级,0",
      "01日05时,n00,晴,27℃,无持续风向,<3级,0"
    ],
    [
      "01日08时,d01,多云,29℃,无持续风向,<3级,2",
      "01日11时,d01,多云,34℃,无持续风向,<3级,2",
      "01日14时,d01,多云,35℃,无持续风向,<3级,2",
      "01日17时,d01,多云,35℃,无持续风向,<3级,3",
      "01日20时,n01,多云,31℃,无持续风向,<3级,0",
      "01日23时,n01,多云,28℃,无持续风向,<3级,0",
      "02日02时,n01,多云,28℃,无持续风向,<3级,0",
      "02日05时,n00,晴,28℃,无持续风向,<3级,0"
    ],
    [
      "02日08时,d00,晴,29℃,无持续风向,<3级,1",
      "02日11时,d00,晴,33℃,无持续风向,<3级,1",
      "02日14时,d00,晴,35℃,无持续风向,<3级,1",
      "02日17时,d00,晴,35℃,无持续风向,<3级,1",
      "02日20时,n00,晴,30℃,无持续风向,<3级,0",
      "02日23时,n00,晴,28℃,无持续风向,<3级,0",
      "03日02时,n01,多云,27℃,无持续风向,<3级,0",
      "03日05时,n01,多云,27℃,无持续风向,<3级,0"
    ],
    [
      "03日08时,d01,多云,29℃,无持续风向,<3级,2",
      "03日11时,d00,晴,33℃,无持续风向,<3级,1",
      "03日14时,d04,雷阵雨,34℃,无持续风向,<3级,3",
      "03日17时,d04,雷阵雨,34℃,无持续风向,<3级,3",
      "03日20时,n04,雷阵雨,29℃,无持续风向,<3级,0",
      "04日02时,n00,晴,29℃,无持续风向,<3级,0"
    ],
    [
      "04日08时,d01,多云,28℃,无持续风向,<3级,2",
      "04日14时,d01,多云,34℃,无持续风向,<3级,2",
      "04日20时,n01,多云,29℃,无持续风向,<3级,0",
      "05日02时,n01,多云,27℃,无持续风向,<3级,0"
    ],
    [
      "05日08时,d01,多云,29℃,无持续风向,<3级,1",
      "05日14时,d01,多云,34℃,无持续风向,<3级,2",
      "05日20时,n01,多云,31℃,无持续风向,<3级,0",
      "06日02时,n01,多云,28℃,无持续风向,<3级,0"
    ],
    [
      "06日08时,d01,多云,28℃,无持续风向,<3级,2",
      "06日14时,d01,多云,34℃,无持续风向,<3级,2",
      "06日20时,n01,多云,30℃,无持续风向,<3级,0",
      "07日02时,n01,多云,26℃,无持续风向,<3级,0"
    ],
    [
      "07日08时,d01,多云,27℃,无持续风向,<3级,2",
      "07日14时,d01,多云,33℃,无持续风向,<3级,2",
      "07日20时,n01,多云,28℃,无持续风向,<3级,0"
    ]
  ],
  "h1": [
    "17,34,东北风,2,0,50,58",
    "18,33,东北风,1,0,52,63",
    "19,32,南风,1,0,67,72",
    "20,31,东南风,1,0,67,70",
    "21,31,东南风,2,0,70,68",
    "22,31,南风,2,0,69,64",
    "23,30,南风,1,0,76,59",
    "00,30,南风,1,0,76,60",
    "01,30,西南风,1,0,76,60",
    "02,30,南风,1,0,76,57",
    "03,27,东南风,2,8,93,57",
    "04,25,西风,2,59.4,97,46",
    "05,26,西风,1,4.1,98,31",
    "06,26,东南风,1,0.3,98,29",
    "07,26,西南风,1,0,98,28",
    "08,27,东北风,1,0,98,28",
    "09,28,东南风,1,0,93,34",
    "10,31,西南风,1,0.1,74,46",
    "11,32,东风,1,0,68,48",
    "12,31,东南风,1,0,75,62",
    "13,31,东北风,2,0,73,60",
    "14,32,东风,1,0,68,60",
    "15,33,东北风,2,0,59,51",
    "16,33,东北风,2,0,55,39",
    "17,32,东北风,2,0,59,"
  ]
}

ts:缓存更新时间戳,单位毫秒。这是我的服务器缓存的天气数据,目前更新周期是1小时。
md:天气数据更新时间,到分钟或秒的时间字符串。这是中国天气数据的更新时间。
pl:城市名称。
h3:间隔3小时天气数据,总长7天(7日预报)。每条预报分别表示:时间、天气图标、天气类别、温度、风向、风力、蓝天预报
天气图标可使用以下参考样式。
蓝天预报,取值0~4,0是晚上(#fff),1大蓝(#1f8ce8),2小蓝(#66bfff),3灰蓝(#8fa6bc),4大灰(#9c9a95)。
h1:间隔1小时天气数据,总长1天(整点预报)。每条预报分别表示:时间、温度、风向、风力、降水、湿度、空气质量

天气图标和蓝天预报参考样式:

big.png40 {
    background-image: url(https://i.tq121.com.cn/i/weather2015/png/blue30.png);
    height: 30px;
    width: 30px
}

big.png80 {
    background-image: url(https://i.tq121.com.cn/i/weather2015/png/blue80.png);
    height: 80px;
    width: 80px
}

big.d0,big.d00 {
    background-position: 0 0
}

big.d1,big.d01 {
    background-position: -80px 0
}

big.d2,big.d02 {
    background-position: -160px 0
}

big.d3,big.d03 {
    background-position: -240px 0
}

big.d4,big.d04 {
    background-position: -320px 0
}

big.d5,big.d05 {
    background-position: -400px 0
}

big.d6,big.d06 {
    background-position: -480px 0
}

big.d7,big.d07 {
    background-position: -560px 0
}

big.d8,big.d08 {
    background-position: -640px 0
}

big.d9,big.d09 {
    background-position: 0 -80px
}

big.d10 {
    background-position: -80px -80px
}

big.d11 {
    background-position: -160px -80px
}

big.d12 {
    background-position: -240px -80px
}

big.d13 {
    background-position: -320px -80px
}

big.d14 {
    background-position: -400px -80px
}

big.d15 {
    background-position: -480px -80px
}

big.d16 {
    background-position: -560px -80px
}

big.d17 {
    background-position: -640px -80px
}

big.d18 {
    background-position: 0 -160px
}

big.d19 {
    background-position: -80px -160px
}

big.d20 {
    background-position: -160px -160px
}

big.d21 {
    background-position: -240px -160px
}

big.d22 {
    background-position: -320px -160px
}

big.d23 {
    background-position: -400px -160px
}

big.d24 {
    background-position: -480px -160px
}

big.d25 {
    background-position: -560px -160px
}

big.d26 {
    background-position: -640px -160px
}

big.d27 {
    background-position: 0 -240px
}

big.d28 {
    background-position: -80px -240px
}

big.d29 {
    background-position: -160px -240px
}

big.d30 {
    background-position: -240px -240px
}

big.d31 {
    background-position: -320px -240px
}

big.d32 {
    background-position: -400px -240px
}

big.d33 {
    background-position: -480px -240px
}

big.d53 {
    background-position: -560px -240px
}

big.d57 {
    background-position: -720px 0
}

big.d32 {
    background-position: -720px -80px
}

big.d49 {
    background-position: -720px -160px
}

big.d58 {
    background-position: -720px -240px
}

big.d54 {
    background-position: -800px 0
}

big.d55 {
    background-position: -800px -80px
}

big.d56 {
    background-position: -800px -160px
}

big.d301 {
    background-position: -880px 0
}

big.d302 {
    background-position: -880px -80px
}

big.n0,big.n00 {
    background-position: 0 -320px
}

big.n1,big.n01 {
    background-position: -80px -320px
}

big.n2,big.n02 {
    background-position: -160px -320px
}

big.n3,big.n03 {
    background-position: -240px -320px
}

big.n4,big.n04 {
    background-position: -320px -320px
}

big.n5,big.n05 {
    background-position: -400px -320px
}

big.n6,big.n06 {
    background-position: -480px -320px
}

big.n7,big.n07 {
    background-position: -560px -320px
}

big.n8,big.n08 {
    background-position: -640px -320px
}

big.n9,big.n09 {
    background-position: 0 -400px
}

big.n10 {
    background-position: -80px -400px
}

big.n11 {
    background-position: -160px -400px
}

big.n12 {
    background-position: -240px -400px
}

big.n13 {
    background-position: -320px -400px
}

big.n14 {
    background-position: -400px -400px
}

big.n15 {
    background-position: -480px -400px
}

big.n16 {
    background-position: -560px -400px
}

big.n17 {
    background-position: -640px -400px
}

big.n18 {
    background-position: 0 -480px
}

big.n19 {
    background-position: -80px -480px
}

big.n20 {
    background-position: -160px -480px
}

big.n21 {
    background-position: -240px -480px
}

big.n22 {
    background-position: -320px -480px
}

big.n23 {
    background-position: -400px -480px
}

big.n24 {
    background-position: -480px -480px
}

big.n25 {
    background-position: -560px -480px
}

big.n26 {
    background-position: -640px -480px
}

big.n27 {
    background-position: 0 -560px
}

big.n28 {
    background-position: -80px -560px
}

big.n29 {
    background-position: -160px -560px
}

big.n30 {
    background-position: -240px -560px
}

big.n31 {
    background-position: -320px -560px
}

big.n32 {
    background-position: -400px -560px
}

big.n33 {
    background-position: -480px -560px
}

big.n53 {
    background-position: -560px -560px
}

big.n57 {
    background-position: -720px -320px
}

big.n32 {
    background-position: -720px -400px
}

big.n49 {
    background-position: -720px -480px
}

big.n58 {
    background-position: -720px -560px
}

big.n54 {
    background-position: -800px -320px
}

big.n55 {
    background-position: -800px -400px
}

big.n56 {
    background-position: -800px -480px
}

big.n301 {
    background-position: -880px -320px
}

big.n302 {
    background-position: -880px -400px
}

big.lv0 {
    background-color: #fff
}

big.lv1 {
    background-color: #1f8ce8
}

big.lv2 {
    background-color: #66bfff
}

big.lv3 {
    background-color: #8fa6bc
}

big.lv4 {
    background-color: #9c9a95
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中实现整点倒计时自动刷新接口的功能,您可以使用Vue的计算属性、定时器和Vue的生命周期钩子函数。以下是一个示例代码: ```vue <template> <div> <p>下次刷新时间:{{ nextRefreshTime }}</p> </div> </template> <script> export default { data() { return { refreshTime: null, // 下次刷新时间 timer: null, // 定时器 }; }, computed: { nextRefreshTime() { if (this.refreshTime) { const currentTime = new Date(); return this.refreshTime > currentTime ? this.refreshTime.toLocaleTimeString() : '刷新中...'; } else { return '未设置刷新时间'; } }, }, mounted() { this.setRefreshTime(); // 初始化设置刷新时间 this.startCountdown(); // 启动倒计时 }, beforeDestroy() { clearInterval(this.timer); // 组件销毁时清除定时器 }, methods: { setRefreshTime() { const currentTime = new Date(); const nextHour = currentTime.getHours() + 1; this.refreshTime = new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate(), nextHour, 0, 0); }, refreshData() { // 执行接口刷新操作 // ... this.setRefreshTime(); // 刷新完成后重新设置刷新时间 }, startCountdown() { this.timer = setInterval(() => { const currentTime = new Date(); if (currentTime >= this.refreshTime) { this.refreshData(); } }, 1000); // 每秒检查一次是否到达下次刷新时间 }, }, }; </script> ``` 在这个示例中,我们使用了一个`refreshTime`的数据属性来存储下次刷新的时间,并使用`timer`属性来存储定时器的引用。 在`setRefreshTime`方法中,我们根据当前时间设置下次刷新时间为当前小时的下一个整点。在计算属性`nextRefreshTime`中,我们根据当前时间和下次刷新时间的比较来显示不同的文本。 在组件的`mounted`钩子中,我们初始化设置刷新时间并启动倒计时。倒计时使用`setInterval`定时器,每秒检查一次是否到达下次刷新时间,如果到达则执行接口刷新操作,并在刷新完成后重新设置刷新时间。 在组件销毁前的`beforeDestroy`钩子中,我们清除定时器,以防止组件销毁后定时器仍然运行。 请注意,在示例中的`refreshData`方法中执行接口刷新操作的部分需要根据实际情况进行替换。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值