1
0
Code Issues Pull Requests Projects Releases Wiki Activity GitHub Gitee

自动拉取数据

This commit is contained in:
程序员小墨 2022-07-26 14:00:15 +08:00
parent 61bcb1f298
commit 48fa9025cd

View File

@ -80,6 +80,10 @@
</div>
<p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p>
<button id="btn_refresh">重新拉取</button>
<label for="auto_refresh">
<input type="checkbox" class="filter_checkbox" name="auto_refresh" id="auto_refresh">自动拉取<span
id="auto_refresh_countdown"></span>
</label>
<span id="update-finish-info" style="color: green; font-weight: bold; display: none;">数据已更新</span>
<table id="list"></table>
<script>
@ -109,6 +113,9 @@
const showDetail = document.getElementById("show_detail");
const showMid = document.getElementById("show_mid");
const autoRefresh = document.getElementById("auto_refresh");
// 绑定按钮点击事件
btnShowAll.addEventListener('click', function () {
for (let i = 0; i < filterCheckbox.length; i++) {
@ -149,10 +156,12 @@
btnRefresh.onclick = function () {
getData();
document.getElementById("update-finish-info").style.display = "";
btnRefresh.style.display = "none";
// btnRefresh.style.display = "none";
btnRefresh.style.visibility = "hidden";
setTimeout(function () {
document.getElementById("update-finish-info").style.display = "none";
btnRefresh.style.display = "";
// btnRefresh.style.display = "";
btnRefresh.style.visibility = "";
}, 1000);
};
@ -164,6 +173,30 @@
};
}
let autoRefreshIntreval = null;
const autoRefreshCountDownElement = document.getElementById('auto_refresh_countdown');
const countDown = 20; // 自动拉取间隔时间,单位:秒
let autoRefreshCountDown = countDown;
autoRefresh.onchange = function () {
if (autoRefresh.checked) {
btnRefresh.style.display = "none";
btnRefresh.click();
autoRefreshIntreval = setInterval(function () {
if ((--autoRefreshCountDown) > 0) {
autoRefreshCountDownElement.innerHTML = `(${autoRefreshCountDown}s)`;
} else {
autoRefreshCountDown = countDown;
btnRefresh.click();
autoRefreshCountDownElement.innerHTML = ``;
}
}, 1000);
} else {
clearInterval(autoRefreshIntreval);
btnRefresh.style.display = "";
autoRefreshCountDownElement.innerHTML = ``;
}
};
// 根据屏幕判断要显示哪些字段
// 此时还未拉取数据,所以进入 render 函数会直接返回,不会多次渲染
let initWidth = document.body.offsetWidth;