合并仓库前的准备

hotband/html/assets/css/main.css

@@ -0,0 +1,34 @@
+#list {
+  width: 100%;
+  text-align: center;
+  border-spacing: 0;
+  border: 0.4px solid black;
+}
+
+#list tr {
+  height: min(1.85rem, 50px);
+}
+
+#list td {
+  margin: 0;
+  border: 0.4px solid black;
+}
+
+/* 热搜的 label 样式 */
+.hotband-label {
+  color: white;
+  padding: 3px;
+  border-radius: 6px;
+  font-size: 10px;
+  display: inline-block;
+}
+
+.bottom-placeholder {
+  height: 90px;
+  font-size:12px;
+  color: #999;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  line-height: 1.7em;
+}

hotband/html/assets/image/bilibili.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 1129 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="200"><path d="M234.909 9.656a80.468 80.468 0 0 1 68.398 0 167.374 167.374 0 0 1 41.843 30.578l160.937 140.82h115.07l160.936-140.82a168.983 168.983 0 0 1 41.843-30.578A80.468 80.468 0 0 1 930.96 76.445a80.468 80.468 0 0 1-17.703 53.914 449.818 449.818 0 0 1-35.406 32.187 232.553 232.553 0 0 1-22.531 18.508h100.585a170.593 170.593 0 0 1 118.289 53.109 171.397 171.397 0 0 1 53.914 118.288v462.693a325.897 325.897 0 0 1-4.024 70.007 178.64 178.64 0 0 1-80.468 112.656 173.007 173.007 0 0 1-92.539 25.75h-738.7a341.186 341.186 0 0 1-72.421-4.024A177.835 177.835 0 0 1 28.91 939.065a172.202 172.202 0 0 1-27.36-92.539V388.662a360.498 360.498 0 0 1 0-66.789A177.03 177.03 0 0 1 162.487 178.64h105.414c-16.899-12.07-31.383-26.555-46.672-39.43a80.468 80.468 0 0 1-25.75-65.984 80.468 80.468 0 0 1 39.43-63.57M216.4 321.873a80.468 80.468 0 0 0-63.57 57.937 108.632 108.632 0 0 0 0 30.578v380.615a80.468 80.468 0 0 0 55.523 80.469 106.218 106.218 0 0 0 34.601 5.632h654.208a80.468 80.468 0 0 0 76.444-47.476 112.656 112.656 0 0 0 8.047-53.109v-354.06a135.187 135.187 0 0 0 0-38.625 80.468 80.468 0 0 0-52.304-54.719 129.554 129.554 0 0 0-49.89-7.242H254.22a268.764 268.764 0 0 0-37.82 0z m0 0" fill="#20B0E3"></path><path d="M348.369 447.404a80.468 80.468 0 0 1 55.523 18.507 80.468 80.468 0 0 1 28.164 59.547v80.468a80.468 80.468 0 0 1-16.094 51.5 80.468 80.468 0 0 1-131.968-9.656 104.609 104.609 0 0 1-10.46-54.719v-80.468a80.468 80.468 0 0 1 70.007-67.593z m416.02 0a80.468 80.468 0 0 1 86.102 75.64v80.468a94.148 94.148 0 0 1-12.07 53.11 80.468 80.468 0 0 1-132.773 0 95.757 95.757 0 0 1-12.875-57.133V519.02a80.468 80.468 0 0 1 70.007-70.812z m0 0" fill="#20B0E3"></path></svg>

hotband/html/assets/image/weibo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2278" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1012.49 451.553v0.159c-6.697 20.66-28.861 31.99-49.449 25.288a39.352 39.352 0 0 1-25.287-49.582l-0.067-0.031c20.536-63.6 7.516-136.156-40.315-189.363-47.892-53.212-118.502-73.554-183.731-59.659-21.222 4.537-42.133-9.047-46.638-30.3-4.506-21.253 9.021-42.194 30.239-46.73 91.709-19.563 191.114 8.98 258.467 83.881 67.36 74.839 85.515 176.85 56.781 266.337z" fill="#D32024"></path><path d="M740.429 304.348v-0.03c-18.217 3.973-36.178-7.732-40.06-26.01-3.947-18.31 7.763-36.373 25.98-40.254 44.692-9.548 93.143 4.322 125.885 40.781 32.866 36.496 41.631 86.17 27.607 129.772a33.833 33.833 0 0 1-42.562 21.847c-17.782-5.76-27.484-24.914-21.724-42.69h-0.062c6.887-21.346 2.565-45.635-13.46-63.473-16.026-17.818-39.752-24.546-61.604-19.943z m30.05 192.184c-14.46-4.352-24.352-7.326-16.774-26.352 16.333-41.313 18.027-76.964 0.317-102.385-33.31-47.734-124.451-45.133-228.838-1.28 0-0.061-32.799 14.367-24.412-11.704 16.056-51.774 13.645-95.186-11.361-120.192-56.658-56.878-207.304 2.12-336.477 131.64C56.187 463.32 0 566.14 0 655.1 0 825.18 217.503 928.594 430.28 928.594c278.917 0 464.527-162.504 464.527-291.59 0-77.936-65.546-122.193-124.329-140.472zM430.842 867.62c-169.774 16.84-316.35-60.155-327.368-171.96-11.049-111.74 117.72-216.034 287.488-232.873 169.805-16.84 316.355 60.16 327.368 171.904 11.018 111.866-117.683 216.09-287.488 232.929z" fill="#D32024"></path><path d="M447.805 548.859c-80.783-21.09-172.119 19.287-207.206 90.65-35.743 72.862-1.188 153.681 80.44 180.1 84.578 27.357 184.233-14.525 218.88-93.148 34.181-76.81-8.478-155.94-92.114-177.602zM386.12 734.792c-16.43 26.29-51.584 37.806-78.065 25.661-26.107-11.889-33.833-42.44-17.403-68.045 16.215-25.538 50.207-36.869 76.498-25.856 26.604 11.392 35.087 41.687 18.97 68.24z" fill="#D32024"></path></svg>

hotband/html/assets/js/isMobile.js

@@ -0,0 +1,24 @@
+function isMobile() {
+    var userAgentInfo = navigator.userAgent;
+
+    var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+
+    var mobile_flag = false;
+
+    //根据userAgent判断是否是手机
+    for (var v = 0; v < mobileAgents.length; v++) {
+        if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
+            mobile_flag = true;
+            break;
+        }
+    }
+    // var screen_width = window.screen.width;
+    // var screen_height = window.screen.height;
+
+    // //根据屏幕分辨率判断是否是手机
+    // if (screen_width > 325 && screen_height < 750) {
+    //     mobile_flag = true;
+    // }
+
+    return mobile_flag;
+}

hotband/html/bilibili_hotband.html

@@ -0,0 +1,310 @@
+<!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>B站热搜</title>
+    <link rel="stylesheet" href="./assets/css/main.css">
+    <style>
+        #list td {
+            font-size: 14px;
+        }
+
+        #mobile-info {
+            color: grey;
+            font-size: 13px;
+            text-align: center;
+        }
+    </style>
+</head>
+
+<body>
+    <div style="text-align: center;">
+        <h1>B站热搜榜</h1>
+        <hr>
+        <div>
+            显示字段：
+            <label for="show_keyword">
+                <input type="checkbox" class="filter_checkbox" name="show_keyword" id="show_keyword" checked="true"
+                    detailed-checked="true">关键词
+            </label>
+            <label for="show_word_type">
+                <input type="checkbox" class="filter_checkbox" name="show_word_type" id="show_word_type"
+                    detailed-checked="true">word_type
+            </label>
+            <label for="show_hot_id">
+                <input type="checkbox" class="filter_checkbox" name="show_hot_id" id="show_hot_id"
+                    detailed-checked="true">hot_id
+            </label>
+            <br>
+            <button id="btn_show_all">全选</button>
+            <button id="btn_show_none">全不选</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>
+    <p id="mobile-info"></p>
+    <div class="bottom-placeholder">
+        <p>
+            — 到底啦 —<br>
+            数据来源: https://www.bilibili.com/blackboard/activity-trending-topic.html
+        </p>
+    </div>
+
+    <script src="./assets/js/isMobile.js"></script>
+    <script>
+        let mobileFlag = isMobile();
+        document.getElementById('mobile-info').innerHTML = `手机、电脑端热搜链接不同，当前为您呈现 <span style="font-weight: bold;">${mobileFlag ? '手机端' : '电脑端'}</span> 链接`;
+    </script>
+    <script>
+        let iconMapper = {
+            "http://i0.hdslb.com/bfs/feed-admin/e9e7a2d8497d4063421b685e72680bf1cfb99a0d.png": ["热", "#FF895C"],
+            "http://i0.hdslb.com/bfs/feed-admin/4d579fb61f9655316582db193118bba3a721eec0.png": ["新", "#F87399"],
+        }
+        function getIconText(iconUrl) {
+            if (!iconUrl) {
+                return '';
+            }
+            else if (Object.keys(iconMapper).indexOf(iconUrl) != -1) {
+                return iconMapper[iconUrl];
+            } else {
+                console.log("未知 iconUrl:", iconUrl);
+                return ["&nbsp;?&nbsp;", 'grey'];
+            }
+        }
+    </script>
+    <script>
+        /**
+         * 全局变量
+         */
+        // 拉取下来的数据
+        let hotBandData;
+
+        // 按钮
+        const btnShowAll = document.getElementById('btn_show_all');
+        const btnShowNone = document.getElementById('btn_show_none');
+        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 showKeyword = document.getElementById("show_keyword");
+        const showWordType = document.getElementById("show_word_type");
+        const showHotId = document.getElementById("show_hot_id");
+
+        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();
+        });
+        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 < 780) {
+            btnShowDefault.click();
+            btnShowDefault.innerHTML += "(默认)";
+        } else {
+            btnShowDetailed.click();
+            btnShowDetailed.innerHTML += "(默认)";
+        }
+
+        // 网页加载后加载榜单
+        getData();
+
+        // 定时刷新
+        // setInterval(getData, 10 * 1000);
+
+        function getData() {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", "../data/bilibili-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>
+                    ${showKeyword.checked ? "<td>关键词</td>" : ""}
+                    ${showWordType.checked ? "<td>word_type</td>" : ""}
+                    ${showHotId.checked ? "<td>hot_id</td>" : ""}
+                </tr>
+            </thead>`);
+            str.push(`<tbody>`);
+
+            for (var i = 0; i < hotBandList.length; i++) {
+                const hotBand = hotBandList[i];
+
+                let linkUrl = mobileFlag
+                    ? `https://m.bilibili.com/search?keyword=${encodeURIComponent(hotBand.keyword)}`
+                    : `https://search.bilibili.com/all?keyword=${encodeURIComponent(hotBand.keyword)}`;
+
+                str.push(`<tr>
+                    <!-- 编号 -->
+                    <td>${hotBand.position}</td>
+
+                    <!-- 热搜 -->
+                    <td style="text-align: left;">
+                        <nobr>
+                            <div style="min-width: 20px; display: inline-block;">
+                                <span class="hotband-label" style="background-color: ${getIconText(hotBand.icon)[1]}; ${hotBand.icon ? "" : "display: none;"}">${getIconText(hotBand.icon)[0]}</span>
+                            </div>
+                            <span>
+                                <a href="${linkUrl}" target="_blank">${hotBand.show_name}</a>
+                            </span>
+                            ${hotBand.show_live_icon ? `<span class="hotband-label" style="background-color: #f69; padding: 1px 5px;">直播中</span>` : ""}
+                        </nobr>
+                    </td>
+
+                    ${showKeyword.checked ? `
+                    <!-- 关键词 -->
+                    <td>${hotBand.keyword}</td>
+                    ` : ""}
+
+                    ${showWordType.checked ? `
+                    <!-- word_type -->
+                    <td>${hotBand.word_type}</td>
+                    ` : ""}
+
+                    ${showHotId.checked ? `
+                    <!-- hot_id -->
+                    <td>${hotBand.hot_id}</td>
+                    ` : ""}
+                </tr >`);
+            }
+            str.push(`</tbody>`);
+            document.getElementById('list').innerHTML = str.join('');
+        }
+    </script>
+</body>
+
+</html>

hotband/html/bilibili_rank.html

@@ -0,0 +1,466 @@
+<!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">
+    <!-- 不携带 referer -->
+    <meta name="referrer" content="never">
+    <title>B站排行</title>
+    <link rel="stylesheet" href="./assets/css/main.css">
+    <style>
+        #title {
+            margin-bottom: 0;
+        }
+
+        #dynamic-note {
+            color: grey;
+            margin: 5px auto;
+            font-size: 13px;
+        }
+
+        td {
+            font-size: 12px;
+
+            max-width: 200px;
+            word-wrap: break-word;
+        }
+    </style>
+</head>
+
+<body>
+    <div style="text-align: center;">
+        <h1 id="title">B站排行榜</h1>
+        <p id="dynamic-note"></p>
+        <hr>
+        <div style="display: none;">
+            显示字段：
+            <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>
+    <div class="bottom-placeholder">
+        <p>
+            — 到底啦 —<br>
+            数据来源: https://www.bilibili.com/v/popular/rank/all
+        </p>
+    </div>
+
+    <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/bilibili-rank/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);
+
+                    // 更新动态 note
+                    document.getElementById("dynamic-note").innerHTML = hotBandData.note;
+
+                    // 更新时间
+                    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>
+                    <td>时长</td>
+                    <td>封面</td>
+                    <td>第一帧</td>
+                    <td>视频ID</td>
+                    <td>分类</td>
+                    <td>发布时间</td>
+                    <td>简介</td>
+                    <td>作者(mid)</td>
+                    <td>统计</td>
+                    <td>视频宽高</td>
+                    <td>定位</td>
+
+                    <td>videos</td>
+                    <td>tid</td>
+                    <td>copyright</td>
+                    <td>state</td>
+                    <td>rights</td>
+                    <td>dynamic</td>
+                    <td>score</td>
+
+                    <td>mission_id</td>
+                    <td>season_id</td>
+                    <td>up_from_v2</td>
+                    <td>others</td>
+                </tr>
+            </thead>`);
+            str.push(`<tbody>`);
+            for (var i = 0; i < hotBandList.length; i++) {
+                const hotBand = hotBandList[i];
+                let link = hotBand.short_link == hotBand.short_link_v2
+                    ? hotBand.short_link
+                    : `${hotBand.short_link}<br/>${hotBand.short_link_v2}`;
+
+                /**
+                 * 视频总秒数转化为友好显示时间
+                 */
+                // refer: https://blog.csdn.net/weixin_43838488/article/details/122337474
+                function formatZero(num, len) {
+                    if (String(num).length > len) {
+                        return num;
+                    }
+                    return (Array(len).join(0) + num).slice(-len)
+                }
+
+                let duration = hotBand.duration - 1; // 根据观测，基本上所有视频都是少1s(有些少了2s或者其他)，所以这里减1
+                let durationArr = [0, 0, 0];
+                durationArr[0] = Math.floor(duration / (60 * 60));
+                durationArr[1] = Math.floor((duration - durationArr[0] * 60 * 60) / 60);
+                durationArr[2] = Math.floor(duration - durationArr[0] * 60 * 60 - durationArr[1] * 60);
+                let durationStr = "";
+                if (durationArr[0] === 0) {
+                    // 小时为0
+                    durationStr = `${formatZero(durationArr[1], 2)}:${formatZero(durationArr[2], 2)}`;
+                } else {
+                    // 小时不为0
+                    durationStr = `${formatZero(durationArr[0], 2)}:${formatZero(durationArr[1], 2)}:${formatZero(durationArr[2], 2)}`;
+                }
+
+                //功能：求最大公约数
+                //参数： x 、y   number
+                //返回值： number
+                function gcd(x, y) {
+                    if (isNaN(x) || isNaN(y)) return null;
+
+                    if (x % y === 0) {
+                        return y;
+                    }
+                    return gcd(y, x % y)
+                    //三目运算符写法：
+                    //return x % y === 0 ? y : gcd(y , x % y) ;
+                }
+                let dimension_gcd = gcd(hotBand.dimension.width, hotBand.dimension.height);
+
+                str.push(`<tr>
+                    <!-- 编号 -->
+                    <td>${i + 1}</td>
+
+                    <!-- 标题 -->
+                    <td>
+                        <a href="${link}" target="_blank">${hotBand.title}</a>
+                    </td>
+
+                    <!-- 时长 -->
+                    <td>${durationStr}<br>(${hotBand.duration}s)</td>
+
+                    <!-- 封面 -->
+                    <td>
+                        <img src="${hotBand.pic}" style="width: 120px;"/>
+                    </td>
+
+                    <!-- 第一帧 -->
+                    <td>
+                        <img src="${hotBand.first_frame}" style="width: 120px;"/>
+                    </td>
+
+                    <!-- aid -->
+                    <td style="text-align: left;">
+                        <nobr>aid: ${hotBand.aid}</nobr>
+                        <nobr>bvid: ${hotBand.bvid}</nobr>
+                        <nobr>cid: ${hotBand.cid}</nobr>
+                    </td>
+
+                    <!-- 分类 -->
+                    <td>${hotBand.tname}</td>
+
+                    <!-- 发布时间 -->
+                    <td style="font-size: 10px;">
+                        <nobr>pubdate: ${new Date(hotBand.pubdate * 1000).toLocaleString()}</nobr>
+                        <nobr>ctime: ${new Date(hotBand.ctime * 1000).toLocaleString()}</nobr>
+                    </td>
+
+                    <!-- 简介 -->
+                    <td>${hotBand.desc}</td>
+
+                    <!-- 作者 -->
+                    <td>
+                        <img src="${hotBand.owner.face}" style="width: 30px;"/><br>
+                        ${hotBand.owner.name}<br>
+                        (${hotBand.owner.mid})
+                        <!-- ${JSON.stringify(hotBand.owner)} -->
+                    </td>
+
+                    <!-- 统计 -->
+                    <td style="text-align: left;">
+                        <nobr>播放: ${hotBand.stat.view}</nobr>
+                        <nobr>弹幕: ${hotBand.stat.danmaku}</nobr>
+                        <nobr>评论: ${hotBand.stat.reply}</nobr>
+                        <nobr>喜欢: ${hotBand.stat.favorite}</nobr>
+                        <nobr>投币: ${hotBand.stat.coin}</nobr>
+                        <nobr>分享: ${hotBand.stat.share}</nobr>
+                        <!--<nobr>当前排名: ${hotBand.stat.now_rank}</nobr>-->
+                        <nobr>历史<!--最高-->排名: ${hotBand.stat.his_rank}</nobr>
+                        <nobr>喜欢数: ${hotBand.stat.like}</nobr>
+                        <nobr>不喜欢数: ${hotBand.stat.dislike}</nobr>
+                        <!-- ${JSON.stringify(hotBand.stat)} -->
+                    </td>
+
+                    <!-- 视频宽高 -->
+                    <td>
+                        ${hotBand.dimension.width}:${hotBand.dimension.height}<br>
+                        (${hotBand.dimension.width / dimension_gcd}:${hotBand.dimension.height / dimension_gcd})
+                        <!-- ${hotBand.dimension.rotate} -->
+                        <!-- ${JSON.stringify(hotBand.dimension)} -->
+                    </td>
+
+                    <!-- 定位 -->
+                    <td>
+                        <nobr>${hotBand.pub_location}</nobr>
+                    </td>
+
+
+                    <!-- videos -->
+                    <td>${hotBand.videos}</td>
+                    <!-- tid -->
+                    <td>${hotBand.tid}</td>
+                    <!-- copyright -->
+                    <td>${hotBand.copyright}</td>
+                    <!-- state -->
+                    <td>${hotBand.state}</td>
+                    <!-- rights -->
+                    <td>${JSON.stringify(hotBand.rights)}</td>
+                    <!-- dynamic -->
+                    <td>${hotBand.dynamic}</td>
+                    <!-- score -->
+                    <td>${hotBand.score}</td>
+
+                    <!-- mission_id -->
+                    <td>${hotBand.mission_id ? hotBand.mission_id : ''}</td>
+                    <!-- season_id -->
+                    <td>${hotBand.season_id ? hotBand.season_id : ''}</td>
+                    <!-- up_from_v2 -->
+                    <td>${hotBand.up_from_v2 ? hotBand.up_from_v2 : ''}</td>
+                    <!-- others -->
+                    <td>
+                        ${hotBand.others
+                        ? `<div style="max-height: 200px; overflow: scroll;"><span>${JSON.stringify(hotBand.others)}</span></div>`
+                        : ''}
+                    </td>
+                </tr >`);
+            }
+            str.push(`</tbody>`);
+            document.getElementById('list').innerHTML = str.join('');
+        }
+    </script>
+</body>
+
+</html>

hotband/html/weibo_hotband.html

@@ -0,0 +1,333 @@
+<!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>
+    <div class="bottom-placeholder">
+        <p>
+            — 到底啦 —<br>
+            数据来源: https://weibo.com/hot/search
+        </p>
+    </div>
+
+    <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>