使用fetch获取wttr.in天气预报

使用fetch获取wttr.in天气预报

在https://wttr.in/可以看到当前ip的天气预报情况,在网页上想快速取得数据并组装为想显示的样式就需要自行处理了

这里我们来尝试实现一个LED时间显示功能天气预报

样式表clock.css

@font-face {
    font-family: 'UnidreamLED'; /*a name to be used later*/
    /*src: url('UnidreamLED.ttf'); *//*URL to font*/
    src: url('https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/fonts/UnidreamLED.ttf');
}
#hexo_electric_clock{
padding:20px
}
.card-clock{
    padding: 0!important;
}
.card-background {
    height: 153px;
    margin: 15px;
    border-radius: 8px;
    background-color: #ececec; /*背景色*/	
    box-shadow: inset 3px 3px 18px 0 rgb(50 50 50 / 40%);
    z-index: 2;
}
.clock-row{
    font-family: UnidreamLED;
    font-weight: 400;
    color: #000;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.card-clock-clockdate,.card-clock-ip{
    text-align: left;
    flex-basis: calc(40% - 5px);
}
.card-clock-weather,.card-clock-location{
    text-align: center;
    flex-basis: calc(30% - 5px);
}
.card-clock-humidity,.card-clock-dackorlight{
    text-align: right;
    flex-basis: calc(30% - 5px);
}
.card-clock-time{
    flex: 1;
    font-family: UnidreamLED;
    font-size: 38px;
    text-align: center;
    line-height: 1.5;
}

clock.js

这个参数returnCitySN = {"cip": "", "cid": "00", "cname": "未知"};如果cip写上具体的IP也能要ip地址来获取天气预报

有些在云端的IP无法取得天气预报

var returnCitySN = {"cip": "", "cid": "00", "cname": "未知"};
   fetch('https://wttr.in/'+returnCitySN["cip"]+'?format="%l+\\+%c+\\+%t+\\+%h"').then(res=>res.text()).then(
    data => {
       if(document.getElementById('hexo_electric_clock')){
        var res_text = data.replace(/not found/g,'not found,not found').replace(/"/g,'').replace(/\+/g,'').replace(/,/g,'\\').replace(/ /g,'').replace(/°C/g,'');
        res_list = res_text.split('\\');
        var clock_box = document.getElementById('hexo_electric_clock');
        clock_box_html = `  
  <div class="clock-row">
<span id="card-clock-clockdate" class="card-clock-clockdate"></span>
<span class="card-clock-weather">${res_list[2]} ${res_list[3]} *C</span>
<span class="card-clock-humidity">

标签：wttr,clock,res,cd,dackorlight,var,天气预报,fetch,card	

From： https://blog.51cto.com/u_12668715/7277565