调用“每日诗词”在你的页面添加一句诗

lzugis

发布于 2024-05-24 13:17:17

540

发布于 2024-05-24 13:17:17

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述

前几天浏览网站的时候看到页面上有句诗，打开调试看了下调用的是“每日诗词”的SDK。本文基于此SDK实现你的页面添加一句诗。

实现效果

实现

1. 引入SDK

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<h2 id="poet"></h2>

2. 调用SDK

jinrishici.load(function (result) {
    if (result.status === "success") {
        console.log(result)
        const { author, dynasty } = result.data.origin
        const content = result.data.content
        document.getElementById('poet').innerText = content
        document.getElementById('poet').setAttribute('info', `${dynasty} • ${author}`)
    }
});

3. 设置样式

#poet {
    width: 42rem;
    padding: 2rem 0;
    border: 1px dashed #ccc;
    text-align: center;
    border-radius: 0.3rem;
    position: relative;
}
#poet:after {
    position: absolute;
    content: attr(info);
    font-size: 0.85rem;
    right: 1.5rem;
    top: -0.6rem;
    background-color: white;
    padding: 0 0.5rem;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-05-24，如有侵权请联系 cloudcommunity@tencent.com 删除

sdk