From 61bcb1f2988a3654ca71570b0c8529514c322f46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?= <2291200076@qq.com> Date: Tue, 26 Jul 2022 13:40:19 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0html?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html/index.html | 145 +++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 125 insertions(+), 20 deletions(-) diff --git a/html/index.html b/html/index.html index 5a5d3fa..80508ed 100644 --- a/html/index.html +++ b/html/index.html @@ -15,7 +15,7 @@ } #list tr { - /* height: 50px; */ + height: min(1.85rem, 50px); } #list td { @@ -41,13 +41,41 @@

微博热搜榜

- 过滤： + 显示字段： + + + + + +
+ + + | + + +

@@ -61,22 +89,70 @@ // 拉取下来的数据 let hotBandData; - // 刷新按钮 + // 按钮 + const btnShowAll = document.getElementById('btn_show_all'); + const btnShowNone = document.getElementById('btn_show_none'); + const btnShowConcise = document.getElementById('btn_show_concise'); + const btnShowDefault = document.getElementById('btn_show_default'); + const btnShowDetailed = document.getElementById('btn_show_detailed'); + const btnRefresh = document.getElementById('btn_refresh'); // 复选框 const filterCheckbox = document.getElementsByClassName("filter_checkbox"); + + const showEmoticon = document.getElementById("show_emoticon"); + const showNum = document.getElementById("show_num"); + const showCategory = document.getElementById("show_category"); + const showOnboardTime = document.getElementById("show_onboard_time"); + const showIsNew = document.getElementById("show_is_new"); const showDetail = document.getElementById("show_detail"); const showMid = document.getElementById("show_mid"); // 绑定按钮点击事件 + btnShowAll.addEventListener('click', function () { + for (let i = 0; i < filterCheckbox.length; i++) { + const element = filterCheckbox[i]; + element.checked = true; + } + render(); + }); + btnShowNone.addEventListener('click', function () { + for (let i = 0; i < filterCheckbox.length; i++) { + const element = filterCheckbox[i]; + element.checked = false; + } + render(); + }); + btnShowConcise.addEventListener('click', function () { + for (let i = 0; i < filterCheckbox.length; i++) { + const element = filterCheckbox[i]; + element.checked = element.getAttribute('concise-checked') === 'true'; + } + render(); + }); + btnShowDefault.addEventListener('click', function () { + for (let i = 0; i < filterCheckbox.length; i++) { + const element = filterCheckbox[i]; + element.checked = element.getAttribute('checked') === 'true'; + } + render(); + }); + btnShowDetailed.addEventListener('click', function () { + for (let i = 0; i < filterCheckbox.length; i++) { + const element = filterCheckbox[i]; + element.checked = element.getAttribute('detailed-checked') === 'true'; + } + render(); + }); + btnRefresh.onclick = function () { getData(); document.getElementById("update-finish-info").style.display = ""; btnRefresh.style.display = "none"; setTimeout(function () { document.getElementById("update-finish-info").style.display = "none"; - btnRefresh.style.display = ""; + btnRefresh.style.display = ""; }, 1000); }; @@ -84,10 +160,27 @@ for (let i = 0; i < filterCheckbox.length; i++) { console.log(filterCheckbox[i]); filterCheckbox[i].onchange = function () { - render(hotBandData); + render(); }; } + // 根据屏幕判断要显示哪些字段 + // 此时还未拉取数据，所以进入 render 函数会直接返回，不会多次渲染 + let initWidth = document.body.offsetWidth; + console.log(initWidth); + if (initWidth < 400) { + btnShowNone.click(); + btnShowNone.innerHTML += "(默认)"; + } else if (initWidth < 600) { + btnShowConcise.click(); + btnShowConcise.innerHTML += "(默认)"; + } else if (initWidth < 1900) { + btnShowDefault.click(); + btnShowDefault.innerHTML += "(默认)"; + } else { + btnShowDetailed.click(); + btnShowDetailed.innerHTML += "(默认)"; + } // 网页加载后加载榜单 getData(); @@ -103,18 +196,20 @@ if (xhr.readyState == 4 && xhr.status == 200) { hotBandData = JSON.parse(xhr.responseText); console.log(hotBandData); - render(hotBandData); + + // 更新时间 + document.getElementById("latestUpdateTime").innerHTML = + "数据拉取时间：" + new Date().toLocaleString() + "
" + + "热榜更新时间：" + new Date(hotBandData.update_time).toLocaleString(); + + // 渲染榜单 + render(); } } } - function render(hotBandData) { - /** - * 更新时间 - */ - document.getElementById("latestUpdateTime").innerHTML = - "数据拉取时间：" + new Date().toLocaleString() + "
" + - "热榜更新时间：" + new Date(hotBandData.update_time).toLocaleString(); + function render() { + if (!hotBandData) return; /** * 渲染热搜列表 @@ -127,11 +222,11 @@ 编号 热搜 - 表情 - 热度
(展示/真实) - 分类 - 热搜上线时间 - 是否新热搜 + ${showEmoticon.checked ? "表情" : ""} + ${showNum.checked ? '热度
(展示/真实)' : ""} + ${showCategory.checked ? "分类" : ""} + ${showOnboardTime.checked ? "上线时间" : ""} + ${showIsNew.checked ? "是否新热搜" : ""} ${showDetail.checked ? "热搜详情" : ""} ${showMid.checked ? "mid" : ""} @@ -154,9 +249,12 @@ + ${showEmoticon.checked ? ` ${hotBand.emoticon} + ` : ""} + ${showNum.checked ? ` ${hotDelta == 0 ? hotBand.num : `${hotBand.num} / ${hotBand.raw_hot}`}
@@ -166,15 +264,22 @@ + ` : ""} + ${showCategory.checked ? ` ${hotBand.category.map((c) => `${c}`).join('；')} + ` : ""} + ${showOnboardTime.checked ? ` ${new Date(hotBand.onboard_time * 1000).toLocaleString()} + ` : ""} + ${showIsNew.checked ? ` ${hotBand.more.is_new == 1 ? "是" : ""} + ` : ""} ${showDetail.checked ? `