SOURCE

//按住ctrl键点击可以打开网址
var datas = {};

window.onload = function () {
    Next();
}

function Next() {
    fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data => {
            document.getElementById("hitokoto").innerText = data.hitokoto
            document.getElementById("log").innerText = JSON.stringify(data);
        })
        .catch(console.error)

    setTimeout(sub, 100)

}

function sub() {
    var bar = document.getElementsByClassName("detail")
    datas = JSON.parse(document.getElementById("log").innerText)

    bar[0].innerText = "id: " + window.datas["id"];
    bar[1].innerText = "hitokoto: " + window.datas["hitokoto"];
    bar[2].innerText = "type: " + window.datas["type"];
    bar[3].innerText = "from: " + window.datas["from"];
    bar[4].innerText = "from_who: " + window.datas["from_who"];
    bar[5].innerText = "creator: " + window.datas["creator"];
    bar[6].innerText = "creator_uid: " + window.datas["creator_uid"];
    bar[7].innerText = "reviewer: " + window.datas["reviewer"];
    bar[8].innerText = "uuid: " + window.datas["uuid"];
    bar[9].innerText = "created_at: " + window.datas["created_at"];
}

主内容：
<p id="hitokoto">（如果显示此内容说明加载失败，否则会被覆盖）</p>
<button onclick="Next()">下一个</button>
<br/>解析：
<p class="detail">id:  </p>
<p class="detail">hitokoto:  </p>
<p class="detail">type:  </p>
<p class="detail">from:  </p>
<p class="detail">from_who:  </p>
<p class="detail">creator:  </p>
<p class="detail">creator_uid:  </p>
<p class="detail">reviewer:  </p>
<p class="detail">uuid:  </p>
<p class="detail">created_at:  </p>

<p id="log" style="color:gray"></p>

#hitokoto{
    border: 1px solid gray;
    color: green;
    font-size: 20px;
}

button{
    height: 50px;
    width: 80px;
}