From 8f808a0422acb900a171f36dd2bc70c5fa31084d 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: Fri, 29 Jul 2022 16:31:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0B=E7=AB=99=E6=8E=92=E8=A1=8C?=
 =?UTF-8?q?=E6=A6=9C=E9=A1=B5=E9=9D=A2=EF=BC=88=E5=86=85=E5=AE=B9=E6=98=AF?=
 =?UTF-8?q?=E5=BE=AE=E5=8D=9A=E7=83=AD=E6=90=9C=E7=9A=84=EF=BC=8C=E9=9C=80?=
 =?UTF-8?q?=E8=A6=81=E6=9B=B4=E6=96=B0=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html/assets/image/icon_rank.png | Bin 0 -> 1951 bytes
 html/bilibili_rank.html         | 326 ++++++++++++++++++++++++++++++++
 index.html                      |  16 +-
 3 files changed, 336 insertions(+), 6 deletions(-)
 create mode 100644 html/assets/image/icon_rank.png
 create mode 100644 html/bilibili_rank.html
diff --git a/html/assets/image/icon_rank.png b/html/assets/image/icon_rank.png
new file mode 100644
index 0000000000000000000000000000000000000000..b50baa0c6e1ac399e9aa9624450a0bc999387f67
GIT binary patch
literal 1951
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

literal 0
HcmV?d00001

diff --git a/html/bilibili_rank.html b/html/bilibili_rank.html
new file mode 100644
index 0000000..dfb9105
--- /dev/null
+++ b/html/bilibili_rank.html
@@ -0,0 +1,326 @@
+<!DOCTYPE html>
+<html lang="cn">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>微博热搜</title>
+    <link rel="stylesheet" href="./assets/css/main.css">
+</head>
+
+<body>
+    <div style="text-align: center;">
+        <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"
+                    detailed-checked="true">热搜详情
+            </label>
+            <label for="show_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>
+    <nobr>
+        <button id="btn_refresh">重新拉取</button>
+    </nobr>
+    <nobr>
+        <label for="auto_refresh">
+            <input type="checkbox" name="auto_refresh" id="auto_refresh">自动拉取<span id="auto_refresh_countdown"></span>
+        </label>
+    </nobr>
+    <nobr>
+        <span id="update-finish-info" style="color: green; font-weight: bold; display: none;">拉取成功，数据已更新</span>
+    </nobr>
+    <table id="list"></table>
+    <script>
+        /**
+         * 全局变量
+         */
+        // 拉取下来的数据
+        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");
+
+        const autoRefresh = document.getElementById("auto_refresh");
+
+
+        // 绑定按钮点击事件
+        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";
+            btnRefresh.style.visibility = "hidden";
+            setTimeout(function () {
+                document.getElementById("update-finish-info").style.display = "none";
+                // btnRefresh.style.display = "";
+                btnRefresh.style.visibility = "";
+            }, 1000);
+        };
+
+        // 绑定复选框改变事件
+        for (let i = 0; i < filterCheckbox.length; i++) {
+            // console.log(filterCheckbox[i]);
+            filterCheckbox[i].onchange = function () {
+                render();
+            };
+        }
+
+        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;
+        // 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();
+
+        // 定时刷新
+        // setInterval(getData, 10 * 1000);
+
+        function getData() {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", "../data/weibo-hotband/latest.json?t=" + Date.now(), true);
+            xhr.send();
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState !== 4) return;
+
+                if (xhr.status == 200) {
+                    try {
+                        hotBandData = JSON.parse(xhr.responseText);
+                        if (!hotBandData.data || typeof hotBandData.data !== 'object')
+                            throw new Error("data is undefined or not an object");
+                    } catch (e) {
+                        console.error("[error]", "\n", e, "\n", "\n", "[xhr.responseText]", "\n", xhr.responseText);
+                        alert("latest.json 文件解析失败，请检查文件");
+                        return;
+                    }
+                    console.log(hotBandData);
+
+                    // 更新时间
+                    document.getElementById("latestUpdateTime").innerHTML =
+                        "数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
+                        "热榜更新时间：" + new Date(hotBandData.update_time).toLocaleString();
+
+                    // 渲染榜单
+                    render();
+                } else if (xhr.status == 404) {
+                    alert("data 目录下未找到 latest.json 文件，可能的原因：\n您还没有运行脚本拉取数据，请先运行脚本，然后刷新页面");
+                }
+            }
+        }
+
+        function render() {
+            if (!hotBandData) return;
+
+            /**
+             * 渲染热搜列表
+             */
+            let hotBandList = hotBandData.data;
+
+            var str = [];
+            // 渲染表格
+            str.push(`<thead>
+                <tr class="thead" style="top: 0; background-color: white; position: sticky;">
+                    <td>编号</td>
+                    <td>热搜</td>
+                    ${showEmoticon.checked ? "<td>表情</td>" : ""}
+                    ${showNum.checked ? '<td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>' : ""}
+                    ${showCategory.checked ? "<td>分类</td>" : ""}
+                    ${showOnboardTime.checked ? "<td>上线时间</td>" : ""}
+                    ${showIsNew.checked ? "<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>
+
+                    ${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/>
+                        <nobr>
+                            <span style="font-size: 10px; color: ${hotDelta > 0 ? "red" : "green"}; font-weight: bold;">
+                                ${hotDelta != 0 ? `(官方调控 ${hotDelta > 0 ? "+" : ""}${hotDelta})` : ""}
+                            </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 ? `
+                    <!-- 热搜详情 -->
+                    <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>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index f1af8d0..9f27256 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,6 @@
             background-color: #fdfdfd;
             box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%);
             display: grid;
-            grid-template-columns: repeat(2, 1fr);
             place-items: center;
         }
 
@@ -73,18 +72,24 @@
         <div id="iframe-container">
             <!-- <iframe src="html/weibo.html" frameborder="0"></iframe> -->
         </div>
-        <div id="float-container" class="bt">
+        <div id="float-container" class="bt" style="grid-template-columns: repeat(3, 1fr);">
             <div class="navbar-item" targetPage="weibo_hotband">
                 <img class="navbar-image" src="./html/assets/image/weibo.svg" />
-                <p class="navbar-title">微博</p>
+                <p class="navbar-title">微博热搜</p>
+            </div>
+            <div class="navbar-item" targetPage="bilibili_rank">
+                <img class="navbar-image" src="./html/assets/image/icon_rank.png" />
+                <p class="navbar-title">B站排行</p>
             </div>
             <div class="navbar-item" targetPage="bilibili_hotband">
-                <img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.84);" />
-                <p class="navbar-title">B站</p>
+                <img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.87);" />
+                <p class="navbar-title">B站热搜</p>
             </div>
         </div>
     </div>
     <script>
+        let pages = ['weibo_hotband', 'bilibili_rank', 'bilibili_hotband'];
+
         let navbarItems = document.querySelectorAll('.navbar-item');
         let iframeContainer = document.querySelector('#iframe-container');
         let iframe = document.querySelector('iframe');
@@ -123,7 +128,6 @@
 
         // 根据 URL 参数切换页面
         function locationToPageByUrlParam() {
-            let pages = ['weibo_hotband', 'bilibili_hotband'];
             // 获取 url 中的 target 参数
             let url = new URL(window.location.href);
             let target = url.searchParams.get('target');
