From 317510a794138b0dc3005e89d0bb870a8c437732 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: Mon, 25 Jul 2022 22:26:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0html=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html/index.html | 223 ++++++++++++++++++++++++++++++++++--------------
 1 file changed, 160 insertions(+), 63 deletions(-)
diff --git a/html/index.html b/html/index.html
index 29c67f9..5a5d3fa 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="cn">
 
 <head>
     <meta charset="UTF-8">
@@ -11,90 +11,187 @@
             width: 100%;
             text-align: center;
             border-spacing: 0;
+            border: 0.4px solid black;
+        }
+
+        #list tr {
+            /* height: 50px; */
         }
 
         #list td {
             margin: 0;
-            border: 0.5px solid black;
+            border: 0.4px solid black;
+        }
+
+        /* 热搜的 label 样式 */
+        .hotband-label {
+            color: white;
+            padding: 3px;
+            border-radius: 6px;
+            font-size: 10px;
+
+
+            display: inline-block;
         }
     </style>
 </head>
 
 <body>
-    <p id="latestUpdateTime"></p>
+    <div style="text-align: center;">
+        <h1>微博热搜榜</h1>
+        <hr>
+        <div>
+            过滤：
+            <label for="show_detail">
+                <input type="checkbox" class="filter_checkbox" name="show_detail" id="show_detail">显示热搜详情
+            </label>
+            <label for="show_mid">
+                <input type="checkbox" class="filter_checkbox" name="show_mid" id="show_mid">显示mid
+            </label>
+        </div>
+    </div>
+    <p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p>
+    <button id="btn_refresh">重新拉取</button>
+    <span id="update-finish-info" style="color: green; font-weight: bold; display: none;">数据已更新</span>
     <table id="list"></table>
     <script>
-        var getDateCount = 0;
-        getData();
-        window.onload = function () {
-            setInterval(getData, 10 * 1000);
+        /**
+         * 全局变量
+         */
+        // 拉取下来的数据
+        let hotBandData;
+
+        // 刷新按钮
+        const btnRefresh = document.getElementById('btn_refresh');
+
+        // 复选框
+        const filterCheckbox = document.getElementsByClassName("filter_checkbox");
+        const showDetail = document.getElementById("show_detail");
+        const showMid = document.getElementById("show_mid");
+
+        // 绑定按钮点击事件
+        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 = "";
+            }, 1000);
         };
 
+        // 绑定复选框改变事件
+        for (let i = 0; i < filterCheckbox.length; i++) {
+            console.log(filterCheckbox[i]);
+            filterCheckbox[i].onchange = function () {
+                render(hotBandData);
+            };
+        }
+
+
+        // 网页加载后加载榜单
+        getData();
+
+        // 定时刷新
+        // setInterval(getData, 10 * 1000);
+
         function getData() {
             var xhr = new XMLHttpRequest();
             xhr.open("GET", "../data/latest.json?t=" + Date.now(), true);
             xhr.send();
             xhr.onreadystatechange = function () {
                 if (xhr.readyState == 4 && xhr.status == 200) {
-                    var data = JSON.parse(xhr.responseText);
-                    console.log(data);
-
-                    /**
-                     * 更新时间
-                     */
-                    document.getElementById("latestUpdateTime").innerHTML =
-                        "数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
-                        "拉取次数：" + ++getDateCount + "<br/>" +
-                        "热榜更新时间：" + new Date(data.update_time).toLocaleString();
-
-                    /**
-                     * 渲染热搜列表
-                     */
-                    let hotBandList = data.data;
-
-                    var str = [];
-                    // 渲染表格
-                    str.push(`<tr>
-                        <td>编号</td>
-                        <td>类型</td>
-                        <td>热搜</td>
-                        <td>表情</td>
-                        <td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>
-                        <td>分类</td>
-                        <td>热搜上线时间</td>
-                        <td>是否新热搜</td>
-                        <td>热搜详情</td>
-                        <td>mid</td>
-                    </tr>`);
-                    for (var i = 0; i < hotBandList.length; i++) {
-                        const hotBand = hotBandList[i];
-                        let hotDelta = hotBand.num - hotBand.raw_hot;
-                        str.push(`<tr>
-                            <td>${i + 1}</td>
-                            <td><span style="background-color: ${hotBand.more.icon_desc_color}; color: white; padding: 3px; border-radius: 6px; font-size: 10px;">${hotBand.label_name}</span></td>
-                            <td><a href="${hotBand.url}" target="_blank">${hotBand.word}</a></td>
-                            <td>${hotBand.emoticon}</td>
-                            <td>
-                                <nobr><span style="font-size: 14px;">${hotDelta == 0 ? hotBand.num : `${hotBand.num} / ${hotBand.raw_hot}`}</span></nobr><br/>
-                                <nobr>
-                                    <span style="font-size: 10px; color: ${hotDelta > 0 ? "red" : "green"}; font-weight: bold;">
-                                        ${hotDelta != 0 ? `(官方调控 ${hotDelta > 0 ? "+" : ""}${hotDelta})` : ""}
-                                    </span>
-                                </nobr>
-                            </td >
-                            <td>${hotBand.category.map((c) => `<nobr>${c}</nobr>`).join('<br>')}</td>
-                            <td style="font-size: 10px;">${new Date(hotBand.onboard_time * 1000).toLocaleString()}</td>
-                            <td>${hotBand.more.is_new == 1 ? "是" : "否"}</td>
-                            <td>
-                                <div style="font-size:10px; max-width: 300px; display: inline-block;">${hotBand.more.detail}</div>
-                            </td>
-                            <td style="font-size: 14px;">${hotBand.more.mid}</td>
-                        </tr >`);
-                    }
-                    document.getElementById('list').innerHTML = str.join('');
+                    hotBandData = JSON.parse(xhr.responseText);
+                    console.log(hotBandData);
+                    render(hotBandData);
                 }
             }
         }
+
+        function render(hotBandData) {
+            /**
+             * 更新时间
+             */
+            document.getElementById("latestUpdateTime").innerHTML =
+                "数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
+                "热榜更新时间：" + new Date(hotBandData.update_time).toLocaleString();
+
+            /**
+             * 渲染热搜列表
+             */
+            let hotBandList = hotBandData.data;
+
+            var str = [];
+            // 渲染表格
+            str.push(`<thead>
+                <tr class="thead" style="top: 0; background-color: white; position: sticky;">
+                    <td>编号</td>
+                    <td>热搜</td>
+                    <td>表情</td>
+                    <td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>
+                    <td>分类</td>
+                    <td>热搜上线时间</td>
+                    <td>是否新热搜</td>
+                    ${showDetail.checked ? "<td>热搜详情</td>" : ""}
+                    ${showMid.checked ? "<td>mid</td>" : ""}
+                </tr>
+            </thead>`);
+            str.push(`<tbody>`);
+            for (var i = 0; i < hotBandList.length; i++) {
+                const hotBand = hotBandList[i];
+                let hotDelta = hotBand.num - hotBand.raw_hot;
+                str.push(`<tr>
+                    <!-- 编号 -->
+                    <td>${i + 1}</td>
+
+                    <!-- 热搜 -->
+                    <td style="text-align: left; font-size: 14px;">
+                        <nobr>
+                            <div style="min-width: 20px; display: inline-block;">
+                                <span class="hotband-label" style="background-color: ${hotBand.more.icon_desc_color};">${hotBand.label_name}</span>
+                            </div>
+                            <a href="${hotBand.url}" target="_blank">${hotBand.word}</a>
+                        </nobr>
+                    </td>
+
+                    <!-- 表情 -->
+                    <td>${hotBand.emoticon}</td>
+
+                    <!-- 热度 -->
+                    <td style="line-height: 12px;">
+                        <nobr><span style="font-size: 14px;">${hotDelta == 0 ? hotBand.num : `${hotBand.num} / ${hotBand.raw_hot}`}</span></nobr><br/>
+                        <nobr>
+                            <span style="font-size: 10px; color: ${hotDelta > 0 ? "red" : "green"}; font-weight: bold;">
+                                ${hotDelta != 0 ? `(官方调控 ${hotDelta > 0 ? "+" : ""}${hotDelta})` : ""}
+                            </span>
+                        </nobr>
+                    </td>
+
+                    <!-- 分类 -->
+                    <td style="font-size: 10px;">${hotBand.category.map((c) => `<nobr>${c}</nobr>`).join('；')}</td>
+
+                    <!-- 热搜上线时间 -->
+                    <td style="font-size: 10px;">${new Date(hotBand.onboard_time * 1000).toLocaleString()}</td>
+
+                    <!-- 是否新热搜 -->
+                    <td>${hotBand.more.is_new == 1 ? "是" : ""}</td>
+
+                    ${showDetail.checked ? `
+                    <!-- 热搜详情 -->
+                    <td>
+                        <div style="font-size:10px; max-width: 300px; display: inline-block;">${hotBand.more.detail}</div>
+                    </td>
+                    ` : ""}
+
+                    ${showMid.checked ? `
+                    <!-- mid -->
+                    <td style="font-size: 14px;">${hotBand.more.mid}</td>
+                    ` : ""}
+                </tr >`);
+            }
+            str.push(`</tbody>`);
+            document.getElementById('list').innerHTML = str.join('');
+        }
     </script>
 </body>
 
