添加B站排行榜页面（内容是微博热搜的，需要更新）
This commit is contained in:
parent
f2dcfe274e
commit
8f808a0422
BIN
html/assets/image/icon_rank.png
Normal file
BIN
html/assets/image/icon_rank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
326
html/bilibili_rank.html
Normal file
326
html/bilibili_rank.html
Normal file
@ -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>
|
||||||
16
index.html
16
index.html
@ -39,7 +39,6 @@
|
|||||||
background-color: #fdfdfd;
|
background-color: #fdfdfd;
|
||||||
box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%);
|
box-shadow: 0 -2px 10px 0 rgb(0 0 0 / 10%);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
place-items: center;
|
place-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -73,18 +72,24 @@
|
|||||||
<div id="iframe-container">
|
<div id="iframe-container">
|
||||||
<!-- <iframe src="html/weibo.html" frameborder="0"></iframe> -->
|
<!-- <iframe src="html/weibo.html" frameborder="0"></iframe> -->
|
||||||
</div>
|
</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">
|
<div class="navbar-item" targetPage="weibo_hotband">
|
||||||
<img class="navbar-image" src="./html/assets/image/weibo.svg" />
|
<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>
|
||||||
<div class="navbar-item" targetPage="bilibili_hotband">
|
<div class="navbar-item" targetPage="bilibili_hotband">
|
||||||
<img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.84);" />
|
<img class="navbar-image" src="./html/assets/image/bilibili.svg" style="transform: scale(0.87);" />
|
||||||
<p class="navbar-title">B站</p>
|
<p class="navbar-title">B站热搜</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
let pages = ['weibo_hotband', 'bilibili_rank', 'bilibili_hotband'];
|
||||||
|
|
||||||
let navbarItems = document.querySelectorAll('.navbar-item');
|
let navbarItems = document.querySelectorAll('.navbar-item');
|
||||||
let iframeContainer = document.querySelector('#iframe-container');
|
let iframeContainer = document.querySelector('#iframe-container');
|
||||||
let iframe = document.querySelector('iframe');
|
let iframe = document.querySelector('iframe');
|
||||||
@ -123,7 +128,6 @@
|
|||||||
|
|
||||||
// 根据 URL 参数切换页面
|
// 根据 URL 参数切换页面
|
||||||
function locationToPageByUrlParam() {
|
function locationToPageByUrlParam() {
|
||||||
let pages = ['weibo_hotband', 'bilibili_hotband'];
|
|
||||||
// 获取 url 中的 target 参数
|
// 获取 url 中的 target 参数
|
||||||
let url = new URL(window.location.href);
|
let url = new URL(window.location.href);
|
||||||
let target = url.searchParams.get('target');
|
let target = url.searchParams.get('target');
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user