coder-xiaomo/tools
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity GitHub Gitee

自动拉取数据

Browse Source
This commit is contained in:
程序员小墨 2022-07-26 14:00:15 +08:00
parent 61bcb1f298
commit 48fa9025cd
1 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
html/index.html
View File

@ -80,6 +80,10 @@
</div> </div>
<p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p> <p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p>
<button id="btn_refresh">重新拉取</button> <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> <span id="update-finish-info" style="color: green; font-weight: bold; display: none;">数据已更新</span>
<table id="list"></table> <table id="list"></table>
<script> <script>
@ -109,6 +113,9 @@
const showDetail = document.getElementById("show_detail"); const showDetail = document.getElementById("show_detail");
const showMid = document.getElementById("show_mid"); const showMid = document.getElementById("show_mid");
const autoRefresh = document.getElementById("auto_refresh");
// 绑定按钮点击事件 // 绑定按钮点击事件
btnShowAll.addEventListener('click', function () { btnShowAll.addEventListener('click', function () {
for (let i = 0; i < filterCheckbox.length; i++) { for (let i = 0; i < filterCheckbox.length; i++) {
@ -149,10 +156,12 @@
btnRefresh.onclick = function () { btnRefresh.onclick = function () {
getData(); getData();
document.getElementById("update-finish-info").style.display = ""; document.getElementById("update-finish-info").style.display = "";
btnRefresh.style.display = "none"; // btnRefresh.style.display = "none";
btnRefresh.style.visibility = "hidden";
setTimeout(function () { setTimeout(function () {
document.getElementById("update-finish-info").style.display = "none"; document.getElementById("update-finish-info").style.display = "none";
btnRefresh.style.display = ""; // btnRefresh.style.display = "";
btnRefresh.style.visibility = "";
}, 1000); }, 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 函数会直接返回，不会多次渲染 // 此时还未拉取数据，所以进入 render 函数会直接返回，不会多次渲染
let initWidth = document.body.offsetWidth; let initWidth = document.body.offsetWidth;