[JavaScript知识库]前端免费API接口

本文主要是统计前端可以免费使用的API接口信息，商用（不以盈利为目的）需缴费使用；反之，则可以免费使用，有些接口会有次数限制，会单独注明。

一、北京时间

1、便民查询接口(传送门)

1)、接口返回值

window.baidu_time({ "time": 1650790777162.8 })

2)、示例代码

(function () {
  // 时间正则 年月日时分秒
  // const TIME_FORMAT = "{0}-{1}-{2} {3}:{4}:{5}";
  const TIME_FORMAT = "{0}\u5e74{1}\u6708{2}\u65e5 {3}:{4}:{5}";
  // 北京时间为东八区时间，所以比格里尼治时间（世界时）早8个小时，即：北京时间 = 世界时 + 8小时
  const TIME_ZONE = +8;
  // 更新日期时间定时器
  let updateDateTimeTimer = null;

  // 将日期时间转为标准的日期时间
  function formatTime(str, arr) {
    return str.replace(/{(\d)}/g, (value, index) => {
      return arr[index];
    });
  }

  // 前缀补零，默认数字不大于10的时候前面补零
  function prefixZero(num, size = 10) {
    return num < size ? "0" + num : num;
  }

  // 返回标准时间
  function initDatetime(time) {
    // 计算时区误差
    let differ = (-1 * new Date().getTimezoneOffset() - TIME_ZONE * 60) * 60000;
    // 当前的日期时间对象
    let datetime = new Date(time - differ);
    // 返回什么格式的时间
    return formatTime(TIME_FORMAT, [
      prefixZero(datetime.getFullYear()),
      prefixZero(datetime.getMonth() + 1),
      prefixZero(datetime.getDate()),
      prefixZero(datetime.getHours()),
      prefixZero(datetime.getMinutes()),
      prefixZero(datetime.getSeconds()),
    ]);
  }

  window.baidu_time = function ({ time }) {
    if (updateDateTimeTimer != 0) {
      clearInterval(updateDateTimeTimer);
      updateDateTimeTimer = 0;
    }
    updateDateTimeTimer = setInterval(function () {
      time += 1000;
      let dateTime = initDatetime(time);
      // dateTime 为格式化以后的标准时间
      console.log(dateTime);
    }, 1000);
  };
})();

function init() {
  let oldJs = document.getElementById("reloadJs");
  oldJs && oldJs.parentNode.removeChild(oldJs);

  let newJs = document.createElement("script");
  newJs.id = "reloadJs";
  newJs.src =
    "https://biaozhunshijian.bmcx.com//web_system/bmcx_com_www/system/file/biaozhunshijian/time/?v=" +
    new Date().getTime();
  document.getElementsByTagName("head")[0].appendChild(newJs);
  // 每间隔一小时，重新调用，减少误差
  setTimeout(() => {
    init();
  }, 1000 * 60 * 60);
}

init();

二、实况天气

1、万年历

1)、json格式(传送门)

{
    "data": {
        "yesterday": {
            "date": "23日星期六",
            "high": "高温 27℃",
            "fx": "东风",
            "low": "低温 12℃",
            "fl": "<![CDATA[2级]]>",
            "type": "多云"
        },
        "city": "铜川",
        "forecast": [
            {
                "date": "24日星期天",
                "high": "高温 20℃",
                "fengli": "<![CDATA[2级]]>",
                "low": "低温 9℃",
                "fengxiang": "西北风",
                "type": "阴"
            },
            {
                "date": "25日星期一",
                "high": "高温 26℃",
                "fengli": "<![CDATA[2级]]>",
                "low": "低温 13℃",
                "fengxiang": "西南风",
                "type": "阴"
            },
            {
                "date": "26日星期二",
                "high": "高温 28℃",
                "fengli": "<![CDATA[2级]]>",
                "low": "低温 16℃",
                "fengxiang": "东北风",
                "type": "阴"
            },
            {
                "date": "27日星期三",
                "high": "高温 26℃",
                "fengli": "<![CDATA[3级]]>",
                "low": "低温 14℃",
                "fengxiang": "东风",
                "type": "多云"
            },
            {
                "date": "28日星期四",
                "high": "高温 20℃",
                "fengli": "<![CDATA[2级]]>",
                "low": "低温 13℃",
                "fengxiang": "东风",
                "type": "阴"
            }
        ],
        "ganmao": "感冒易发期，外出请适当调整衣物，注意补充水分。",
        "wendu": "19"
    },
    "status": 1000,
    "desc": "OK"
}

2)、XML格式(传送门)

<resp>
    <city>铜川</city>
    <updatetime>17:01</updatetime>
    <wendu>19</wendu>
    <fengli>
        <![CDATA[ 2级 ]]>
    </fengli>
    <shidu>73%</shidu>
    <fengxiang>南风</fengxiang>
    <sunrise_1>05:59</sunrise_1>
    <sunset_1>19:24</sunset_1>
    <sunrise_2/>
    <sunset_2/>
    <yesterday>
        <date_1>23日星期六</date_1>
        <high_1>高温 27℃</high_1>
        <low_1>低温 12℃</low_1>
        <day_1>
            <type_1>多云</type_1>
            <fx_1>东风</fx_1>
            <fl_1>
                <![CDATA[ 2级 ]]>
            </fl_1>
        </day_1>
        <night_1>
            <type_1>多云</type_1>
            <fx_1>东风</fx_1>
            <fl_1>
                <![CDATA[ 2级 ]]>
            </fl_1>
        </night_1>
    </yesterday>
    <forecast>
        <weather>
            <date>24日星期天</date>
            <high>高温 23℃</high>
            <low>低温 15℃</low>
            <day>
                <type>阴</type>
                <fengxiang>西北风</fengxiang>
                <fengli>
                    <![CDATA[ 2级 ]]>
                </fengli>
            </day>
            <night>
                <type>多云</type>
                <fengxiang>西北风</fengxiang>
                <fengli>
                    <![CDATA[ 2级 ]]>
                </fengli>
            </night>
        </weather>
        <weather>
            <date>25日星期一</date>
            <high>高温 27℃</high>
            <low>低温 13℃</low>
            <day>
                <type>阴</type>
                <fengxiang>西南风</fengxiang>
                <fengli>
                    <![CDATA[ 2级 ]]>
                </fengli>
            </day>
            <night>
                <type>晴</type>
                <fengxiang>西南风</fengxiang>
                <fengli>
                    <![CDATA[ 2级 ]]>
                </fengli>
            </night>
        </weather>
        <weather>
            <date>26日星期二</date>
            <high>高温 29℃</high>
            <low>低温 13℃</low>
            <day>
                <type>阴</type>
                <fengxiang>东北风</fengxiang>
                <fengli>
                    <![CDATA[ 2级 ]]>
                </fengli>
            </day>
            <night>
                <type>阴</type>
                <fengxiang>东北风</fengxiang>
                <fengli>
                    <![CDATA[ 2级 ]]>
                </fengli>
            </night>
        </weather>
        <weather>
            <date>27日星期三</date>
            <high>高温 21℃</high>
            <low>低温 9℃</low>
            <day>
                <type>多云</type>
                <fengxiang>东风</fengxiang>
                <fengli>
                    <![CDATA[ 3级 ]]>
                </fengli>
            </day>
            <night>
                <type>中雨</type>
                <fengxiang>东风</fengxiang>
                <fengli>
                    <![CDATA[ 3级 ]]>
                </fengli>
            </night>
        </weather>
        <weather>
            <date>28日星期四</date>
            <high>高温 20℃</high>
            <low>低温 8℃</low>
            <day>
                <type>阴</type>
                <fengxiang>东风</fengxiang>
                <fengli>
                    <![CDATA[ 2级 ]]>
                </fengli>
            </day>
            <night>
                <type>多云</type>
                <fengxiang>东风</fengxiang>
                <fengli>
                    <![CDATA[ 2级 ]]>
                </fengli>
            </night>
        </weather>
    </forecast>
    <zhishus>
        <zhishu>
            <name>穿衣指数</name>
            <value>薄款春秋装</value>
            <detail>天气舒适，温度适宜。建议着T恤衫、休闲服等，既舒适，又时尚。</detail>
        </zhishu>
        <zhishu>
            <name>紫外线强度</name>
            <value>紫外线较弱</value>
            <detail>紫外线强度弱，外出记得涂防晒霜，避免皮肤受到太阳辐射的危害。</detail>
        </zhishu>
        <zhishu>
            <name>护肤指数</name>
            <value>常规护肤</value>
            <detail>空气适宜，请根据皮肤类型，选择适合的常规护肤品。</detail>
        </zhishu>
        <zhishu>
            <name>洗车指数</name>
            <value>较适宜洗车</value>
            <detail>今明两日天气较好，可以放心洗车。</detail>
        </zhishu>
        <zhishu>
            <name>感冒指数</name>
            <value>少发感冒</value>
            <detail>感冒低发期，天气舒适，请注意多吃蔬菜水果，多喝水哦。</detail>
        </zhishu>
        <zhishu>
            <name>晾晒指数</name>
            <value>不适宜晾晒</value>
            <detail>阳光不充足，不适宜晾晒。</detail>
        </zhishu>
        <zhishu>
            <name>户外指数</name>
            <value>较适宜外出</value>
            <detail>天气还可以，预计白天没有降水，适合参加户外活动，适当锻炼身体。</detail>
        </zhishu>
        <zhishu>
            <name>污染指数</name>
            <value>轻微污染</value>
            <detail>空气质量良好，污染物浓度低，对健康人群无明显影响，可在户外适当活动。</detail>
        </zhishu>
        <zhishu>
            <name>钓鱼指数</name>
            <value>较适宜</value>
            <detail>阴天钓浅不钓深，钓近不钓远。考验您技术的时候到了！</detail>
        </zhishu>
        <zhishu>
            <name>中暑指数</name>
            <value>不易中暑</value>
            <detail>预计今日整体天气适中，中暑的可能性较低，无需做特殊防护。</detail>
        </zhishu>
        <zhishu>
            <name>舒适度</name>
            <value>较舒适</value>
            <detail>天气凉爽，微微冷，对于大部分人来说是舒适的。</detail>
        </zhishu>
        <zhishu>
            <name>赏月指数</name>
            <value>不适宜赏月</value>
            <detail>今晚看不到月亮，不适合赏月</detail>
        </zhishu>
    </zhishus>
</resp>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖