更新html

html/index.html

@@ -15,7 +15,7 @@
         }
 
         #list tr {
-            /* height: 50px; */
+            height: min(1.85rem, 50px);
         }
 
         #list td {
@@ -41,13 +41,41 @@
         <h1>微博热搜榜</h1>
         <hr>
         <div>
-            过滤：
+            显示字段：
+            <label for="show_emoticon">
+                <input type="checkbox" class="filter_checkbox" name="show_emoticon" id="show_emoticon"
+                    detailed-checked="true">热搜表情
+            </label>
+            <label for="show_num">
+                <input type="checkbox" class="filter_checkbox" name="show_num" id="show_num" checked="true"
+                    concise-checked="true" detailed-checked="true">热度
+            </label>
+            <label for="show_category">
+                <input type="checkbox" class="filter_checkbox" name="show_category" id="show_category" checked="true"
+                    detailed-checked="true">分类
+            </label>
+            <label for="show_onboard_time">
+                <input type="checkbox" class="filter_checkbox" name="show_onboard_time" id="show_onboard_time"
+                    checked="true" detailed-checked="true">上线时间
+            </label>
+            <label for="show_is_new">
+                <input type="checkbox" class="filter_checkbox" name="show_is_new" id="show_is_new"
+                    detailed-checked="true">是否新热搜
+            </label>
             <label for="show_detail">
-                <input type="checkbox" class="filter_checkbox" name="show_detail" id="show_detail">显示热搜详情
+                <input type="checkbox" class="filter_checkbox" name="show_detail" id="show_detail"
+                    detailed-checked="true">热搜详情
             </label>
             <label for="show_mid">
-                <input type="checkbox" class="filter_checkbox" name="show_mid" id="show_mid">显示mid
+                <input type="checkbox" class="filter_checkbox" name="show_mid" id="show_mid">mid
             </label>
+            <br>
+            <button id="btn_show_all">全选</button>
+            <button id="btn_show_none">全不选</button>
+            |
+            <button id="btn_show_concise">简洁</button>
+            <button id="btn_show_default">普通</button>
+            <button id="btn_show_detailed">详细</button>
         </div>
     </div>
     <p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p>
@@ -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() + "<br/>" +
+                        "热榜更新时间：" + new Date(hotBandData.update_time).toLocaleString();
+
+                    // 渲染榜单
+                    render();
                 }
             }
         }
 
-        function render(hotBandData) {
+        function render() {
-            /**
+            if (!hotBandData) return;
-             * 更新时间
-             */
-            document.getElementById("latestUpdateTime").innerHTML =
-                "数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
-                "热榜更新时间：" + new Date(hotBandData.update_time).toLocaleString();
 
             /**
              * 渲染热搜列表
@@ -127,11 +222,11 @@
                 <tr class="thead" style="top: 0; background-color: white; position: sticky;">
                     <td>编号</td>
                     <td>热搜</td>
-                    <td>表情</td>
+                    ${showEmoticon.checked ? "<td>表情</td>" : ""}
-                    <td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>
+                    ${showNum.checked ? '<td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>' : ""}
-                    <td>分类</td>
+                    ${showCategory.checked ? "<td>分类</td>" : ""}
-                    <td>热搜上线时间</td>
+                    ${showOnboardTime.checked ? "<td>上线时间</td>" : ""}
-                    <td>是否新热搜</td>
+                    ${showIsNew.checked ? "<td>是否新热搜</td>" : ""}
                     ${showDetail.checked ? "<td>热搜详情</td>" : ""}
                     ${showMid.checked ? "<td>mid</td>" : ""}
                 </tr>
@@ -154,9 +249,12 @@
                         </nobr>
                     </td>
 
+                    ${showEmoticon.checked ? `
                     <!-- 表情 -->
                     <td>${hotBand.emoticon}</td>
+                    ` : ""}
 
+                    ${showNum.checked ? `
                     <!-- 热度 -->
                     <td style="line-height: 12px;">
                         <nobr><span style="font-size: 14px;">${hotDelta == 0 ? hotBand.num : `${hotBand.num} / ${hotBand.raw_hot}`}</span></nobr><br/>
@@ -166,15 +264,22 @@
                             </span>
                         </nobr>
                     </td>
+                    ` : ""}
 
+                    ${showCategory.checked ? `
                     <!-- 分类 -->
                     <td style="font-size: 10px;">${hotBand.category.map((c) => `<nobr>${c}</nobr>`).join('；')}</td>
+                    ` : ""}
 
+                    ${showOnboardTime.checked ? `
                     <!-- 热搜上线时间 -->
                     <td style="font-size: 10px;">${new Date(hotBand.onboard_time * 1000).toLocaleString()}</td>
+                    ` : ""}
 
+                    ${showIsNew.checked ? `
                     <!-- 是否新热搜 -->
                     <td>${hotBand.more.is_new == 1 ? "是" : ""}</td>
+                    ` : ""}
 
                     ${showDetail.checked ? `
                     <!-- 热搜详情 -->