這個想法是創(chuàng)建一個 html 滾動條來實時接收日志。我正在使用FLASK，它對于創(chuàng)建網(wǎng)頁非常有用，但到目前為止只知道處理該工具的網(wǎng)頁的基礎知識。
2 回答
繁華開滿天機
TA貢獻1816條經(jīng)驗 獲得超4個贊
獲取一些文字
將其填充到元素中
將元素滾動到底部
// don't need this. It's to get the posts from the fake API
let id = 0;
// get a reference to the logs element
const logs = document.getElementById("logs");
// this takes some text, wraps in in a <pre> tag and returns the element
function makeLogEntry(str) {
const el = document.createElement("pre");
el.innerText = str;
return el;
}
// This is just to tick up the post id and roll it back to 1 if we go over 100, since the fake api only has 100 posts
function getId() {
return ++id > 100 ? 1 : id;
}
function getPost(id) {
fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
.then(response => response.json())
.then(json => {
// wrap the log message in a tag and append it to the logs
logs.append(makeLogEntry(json.title));
// scroll the logs element to the bottom
// see (https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div)
logs.scrollTop = logs.scrollHeight;
})
}
// fetch stuff every 2 seconds
setInterval(() => getPost(getId()), 2000);
#logs {
width: 100%;
height: 100px;
border: 1px solid #ddd;
overflow: scroll;
}
<div id="logs"></div>
肥皂起泡泡
TA貢獻1829條經(jīng)驗 獲得超6個贊
fetch?您必須使用 javascript ，
您的服務器應該提供數(shù)據(jù)。然后你使用 JS DOM 將數(shù)據(jù)放入你想要放置的容器中。然后，要啟用滾動，您必須編寫一個包含區(qū)域大小和規(guī)則的 css overflow-y:scroll文件。
添加回答
舉報
0/150
提交
取消