B站热搜榜单初步完成；网页标题跟随子iframe变化而变化
This commit is contained in:
parent
ea7bf84f1d
commit
636033fa57
@ -5,13 +5,29 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>微博热搜</title>
|
<title>B站排行</title>
|
||||||
<link rel="stylesheet" href="./assets/css/main.css">
|
<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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<h1>微博热搜榜</h1>
|
<h1 id="title">B站排行榜（调整中）</h1>
|
||||||
|
<p id="dynamic-note"></p>
|
||||||
<hr>
|
<hr>
|
||||||
<div>
|
<div>
|
||||||
显示字段：
|
显示字段：
|
||||||
@ -201,7 +217,7 @@
|
|||||||
|
|
||||||
function getData() {
|
function getData() {
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open("GET", "../data/weibo-hotband/latest.json?t=" + Date.now(), true);
|
xhr.open("GET", "../data/bilibili-rank/latest.json?t=" + Date.now(), true);
|
||||||
xhr.send();
|
xhr.send();
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function () {
|
||||||
if (xhr.readyState !== 4) return;
|
if (xhr.readyState !== 4) return;
|
||||||
@ -218,6 +234,9 @@
|
|||||||
}
|
}
|
||||||
console.log(hotBandData);
|
console.log(hotBandData);
|
||||||
|
|
||||||
|
// 更新动态 note
|
||||||
|
document.getElementById("dynamic-note").innerHTML = hotBandData.note;
|
||||||
|
|
||||||
// 更新时间
|
// 更新时间
|
||||||
document.getElementById("latestUpdateTime").innerHTML =
|
document.getElementById("latestUpdateTime").innerHTML =
|
||||||
"数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
|
"数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
|
||||||
@ -243,15 +262,37 @@
|
|||||||
// 渲染表格
|
// 渲染表格
|
||||||
str.push(`<thead>
|
str.push(`<thead>
|
||||||
<tr class="thead" style="top: 0; background-color: white; position: sticky;">
|
<tr class="thead" style="top: 0; background-color: white; position: sticky;">
|
||||||
|
|
||||||
<td>编号</td>
|
<td>编号</td>
|
||||||
<td>热搜</td>
|
<td>aid</td>
|
||||||
${showEmoticon.checked ? "<td>表情</td>" : ""}
|
<td>videos</td>
|
||||||
${showNum.checked ? '<td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>' : ""}
|
<td>tid</td>
|
||||||
${showCategory.checked ? "<td>分类</td>" : ""}
|
<td>tname</td>
|
||||||
${showOnboardTime.checked ? "<td>上线时间</td>" : ""}
|
<td>copyright</td>
|
||||||
${showIsNew.checked ? "<td>是否新热搜</td>" : ""}
|
<td>pic</td>
|
||||||
${showDetail.checked ? "<td>热搜详情</td>" : ""}
|
<td>title</td>
|
||||||
${showMid.checked ? "<td>mid</td>" : ""}
|
<td>pubdate</td>
|
||||||
|
<td>ctime</td>
|
||||||
|
<td>desc</td>
|
||||||
|
<td>state</td>
|
||||||
|
<td>duration</td>
|
||||||
|
<td>mission_id</td>
|
||||||
|
<td>rights</td>
|
||||||
|
<td>owner</td>
|
||||||
|
<td>stat</td>
|
||||||
|
<td>dynamic</td>
|
||||||
|
<td>cid</td>
|
||||||
|
<td>dimension</td>
|
||||||
|
<td>short_link</td>
|
||||||
|
<td>short_link_v2</td>
|
||||||
|
<td>first_frame</td>
|
||||||
|
<td>pub_location</td>
|
||||||
|
<td>bvid</td>
|
||||||
|
<td>score</td>
|
||||||
|
|
||||||
|
<td>season_id</td>
|
||||||
|
<td>up_from_v2</td>
|
||||||
|
<td>others</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>`);
|
</thead>`);
|
||||||
str.push(`<tbody>`);
|
str.push(`<tbody>`);
|
||||||
@ -261,60 +302,63 @@
|
|||||||
str.push(`<tr>
|
str.push(`<tr>
|
||||||
<!-- 编号 -->
|
<!-- 编号 -->
|
||||||
<td>${i + 1}</td>
|
<td>${i + 1}</td>
|
||||||
|
<!-- aid -->
|
||||||
|
<td>${hotBand.aid}</td>
|
||||||
|
<!-- videos -->
|
||||||
|
<td>${hotBand.videos}</td>
|
||||||
|
<!-- tid -->
|
||||||
|
<td>${hotBand.tid}</td>
|
||||||
|
<!-- tname -->
|
||||||
|
<td>${hotBand.tname}</td>
|
||||||
|
<!-- copyright -->
|
||||||
|
<td>${hotBand.copyright}</td>
|
||||||
|
<!-- pic -->
|
||||||
|
<td>${hotBand.pic}</td>
|
||||||
|
<!-- title -->
|
||||||
|
<td>${hotBand.title}</td>
|
||||||
|
<!-- pubdate -->
|
||||||
|
<td>${hotBand.pubdate}</td>
|
||||||
|
<!-- ctime -->
|
||||||
|
<td>${hotBand.ctime}</td>
|
||||||
|
<!-- desc -->
|
||||||
|
<td>${hotBand.desc}</td>
|
||||||
|
<!-- state -->
|
||||||
|
<td>${hotBand.state}</td>
|
||||||
|
<!-- duration -->
|
||||||
|
<td>${hotBand.duration}</td>
|
||||||
|
<!-- mission_id -->
|
||||||
|
<td>${hotBand.mission_id}</td>
|
||||||
|
<!-- rights -->
|
||||||
|
<td>${JSON.stringify(hotBand.rights)}</td>
|
||||||
|
<!-- owner -->
|
||||||
|
<td>${JSON.stringify(hotBand.owner)}</td>
|
||||||
|
<!-- stat -->
|
||||||
|
<td>${JSON.stringify(hotBand.stat)}</td>
|
||||||
|
<!-- dynamic -->
|
||||||
|
<td>${hotBand.dynamic}</td>
|
||||||
|
<!-- cid -->
|
||||||
|
<td>${hotBand.cid}</td>
|
||||||
|
<!-- dimension -->
|
||||||
|
<td>${JSON.stringify(hotBand.dimension)}</td>
|
||||||
|
<!-- short_link -->
|
||||||
|
<td>${hotBand.short_link}</td>
|
||||||
|
<!-- short_link_v2 -->
|
||||||
|
<td>${hotBand.short_link_v2}</td>
|
||||||
|
<!-- first_frame -->
|
||||||
|
<td>${hotBand.first_frame}</td>
|
||||||
|
<!-- pub_location -->
|
||||||
|
<td>${hotBand.pub_location}</td>
|
||||||
|
<!-- bvid -->
|
||||||
|
<td>${hotBand.bvid}</td>
|
||||||
|
<!-- score -->
|
||||||
|
<td>${hotBand.score}</td>
|
||||||
|
|
||||||
<!-- 热搜 -->
|
<!-- season_id -->
|
||||||
<td style="text-align: left; font-size: 14px;">
|
<td>${hotBand.season_id}</td>
|
||||||
<nobr>
|
<!-- up_from_v2 -->
|
||||||
<div style="min-width: 20px; display: inline-block;">
|
<td>${hotBand.up_from_v2}</td>
|
||||||
<span class="hotband-label" style="background-color: ${hotBand.more.icon_desc_color};">${hotBand.label_name}</span>
|
<!-- others -->
|
||||||
</div>
|
<td>${JSON.stringify(hotBand.others)}</td>
|
||||||
<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 >`);
|
</tr >`);
|
||||||
}
|
}
|
||||||
str.push(`</tbody>`);
|
str.push(`</tbody>`);
|
||||||
|
|||||||
24
index.html
24
index.html
@ -5,7 +5,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>微博热搜</title>
|
<title>热搜榜单</title>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -71,7 +71,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div id="iframe-container">
|
<div id="iframe-container">
|
||||||
<!-- <iframe src="html/weibo.html" frameborder="0"></iframe> -->
|
<!-- <iframe id="main-iframe" src="html/weibo.html" frameborder="0"></iframe> -->
|
||||||
</div>
|
</div>
|
||||||
<div id="float-container" class="bt">
|
<div id="float-container" class="bt">
|
||||||
<!-- <div class="navbar-item" targetPage="weibo_hotband">
|
<!-- <div class="navbar-item" targetPage="weibo_hotband">
|
||||||
@ -88,18 +88,18 @@
|
|||||||
icon: './html/assets/image/weibo.svg',
|
icon: './html/assets/image/weibo.svg',
|
||||||
icon_scale: 1,
|
icon_scale: 1,
|
||||||
},
|
},
|
||||||
'bilibili_rank': {
|
|
||||||
title: 'B站排行',
|
|
||||||
// url: 'html/bilibili_rank.html',
|
|
||||||
icon: './html/assets/image/icon_rank.png',
|
|
||||||
icon_scale: 1,
|
|
||||||
},
|
|
||||||
'bilibili_hotband': {
|
'bilibili_hotband': {
|
||||||
title: 'B站热搜',
|
title: 'B站热搜',
|
||||||
// url: 'html/bilibili_hotband.html',
|
// url: 'html/bilibili_hotband.html',
|
||||||
icon: './html/assets/image/bilibili.svg',
|
icon: './html/assets/image/bilibili.svg',
|
||||||
icon_scale: 0.87,
|
icon_scale: 0.87,
|
||||||
},
|
},
|
||||||
|
'bilibili_rank': {
|
||||||
|
title: 'B站排行',
|
||||||
|
// url: 'html/bilibili_rank.html',
|
||||||
|
icon: './html/assets/image/icon_rank.png',
|
||||||
|
icon_scale: 1,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
// 渲染导航栏
|
// 渲染导航栏
|
||||||
for (let key in pages) {
|
for (let key in pages) {
|
||||||
@ -118,7 +118,7 @@
|
|||||||
<script>
|
<script>
|
||||||
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('#main-iframe');
|
||||||
navbarItems.forEach(item => {
|
navbarItems.forEach(item => {
|
||||||
item.addEventListener('click', () => {
|
item.addEventListener('click', () => {
|
||||||
// 已选中项再次点击，不执行操作
|
// 已选中项再次点击，不执行操作
|
||||||
@ -147,9 +147,15 @@
|
|||||||
if (iframe)
|
if (iframe)
|
||||||
iframe.remove();
|
iframe.remove();
|
||||||
iframe = document.createElement('iframe');
|
iframe = document.createElement('iframe');
|
||||||
|
iframe.id = "main-iframe";
|
||||||
iframe.src = url;
|
iframe.src = url;
|
||||||
iframe.setAttribute('frameborder', '0');
|
iframe.setAttribute('frameborder', '0');
|
||||||
iframeContainer.appendChild(iframe);
|
iframeContainer.appendChild(iframe);
|
||||||
|
|
||||||
|
iframe.addEventListener('load', function (event) {
|
||||||
|
console.log(event);
|
||||||
|
document.title = document.getElementById("main-iframe").contentWindow.document.title + " | 热搜榜单"
|
||||||
|
}, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据 URL 参数切换页面
|
// 根据 URL 参数切换页面
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user