B站热搜榜单初步完成；网页标题跟随子iframe变化而变化
This commit is contained in:
parent
ea7bf84f1d
commit
636033fa57
@ -5,13 +5,29 @@
|
||||
<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>
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="text-align: center;">
|
||||
<h1>微博热搜榜</h1>
|
||||
<h1 id="title">B站排行榜（调整中）</h1>
|
||||
<p id="dynamic-note"></p>
|
||||
<hr>
|
||||
<div>
|
||||
显示字段：
|
||||
@ -201,7 +217,7 @@
|
||||
|
||||
function getData() {
|
||||
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.onreadystatechange = function () {
|
||||
if (xhr.readyState !== 4) return;
|
||||
@ -218,6 +234,9 @@
|
||||
}
|
||||
console.log(hotBandData);
|
||||
|
||||
// 更新动态 note
|
||||
document.getElementById("dynamic-note").innerHTML = hotBandData.note;
|
||||
|
||||
// 更新时间
|
||||
document.getElementById("latestUpdateTime").innerHTML =
|
||||
"数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
|
||||
@ -243,15 +262,37 @@
|
||||
// 渲染表格
|
||||
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>" : ""}
|
||||
<td>aid</td>
|
||||
<td>videos</td>
|
||||
<td>tid</td>
|
||||
<td>tname</td>
|
||||
<td>copyright</td>
|
||||
<td>pic</td>
|
||||
<td>title</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>
|
||||
</thead>`);
|
||||
str.push(`<tbody>`);
|
||||
@ -261,60 +302,63 @@
|
||||
str.push(`<tr>
|
||||
<!-- 编号 -->
|
||||
<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>
|
||||
|
||||
<!-- 热搜 -->
|
||||
<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>
|
||||
` : ""}
|
||||
<!-- season_id -->
|
||||
<td>${hotBand.season_id}</td>
|
||||
<!-- up_from_v2 -->
|
||||
<td>${hotBand.up_from_v2}</td>
|
||||
<!-- others -->
|
||||
<td>${JSON.stringify(hotBand.others)}</td>
|
||||
</tr >`);
|
||||
}
|
||||
str.push(`</tbody>`);
|
||||
|
||||
24
index.html
24
index.html
@ -5,7 +5,7 @@
|
||||
<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>
|
||||
<title>热搜榜单</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@ -71,7 +71,7 @@
|
||||
<body>
|
||||
<div class="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 id="float-container" class="bt">
|
||||
<!-- <div class="navbar-item" targetPage="weibo_hotband">
|
||||
@ -88,18 +88,18 @@
|
||||
icon: './html/assets/image/weibo.svg',
|
||||
icon_scale: 1,
|
||||
},
|
||||
'bilibili_rank': {
|
||||
title: 'B站排行',
|
||||
// url: 'html/bilibili_rank.html',
|
||||
icon: './html/assets/image/icon_rank.png',
|
||||
icon_scale: 1,
|
||||
},
|
||||
'bilibili_hotband': {
|
||||
title: 'B站热搜',
|
||||
// url: 'html/bilibili_hotband.html',
|
||||
icon: './html/assets/image/bilibili.svg',
|
||||
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) {
|
||||
@ -118,7 +118,7 @@
|
||||
<script>
|
||||
let navbarItems = document.querySelectorAll('.navbar-item');
|
||||
let iframeContainer = document.querySelector('#iframe-container');
|
||||
let iframe = document.querySelector('iframe');
|
||||
let iframe = document.querySelector('#main-iframe');
|
||||
navbarItems.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
// 已选中项再次点击，不执行操作
|
||||
@ -147,9 +147,15 @@
|
||||
if (iframe)
|
||||
iframe.remove();
|
||||
iframe = document.createElement('iframe');
|
||||
iframe.id = "main-iframe";
|
||||
iframe.src = url;
|
||||
iframe.setAttribute('frameborder', '0');
|
||||
iframeContainer.appendChild(iframe);
|
||||
|
||||
iframe.addEventListener('load', function (event) {
|
||||
console.log(event);
|
||||
document.title = document.getElementById("main-iframe").contentWindow.document.title + " | 热搜榜单"
|
||||
}, true);
|
||||
}
|
||||
|
||||
// 根据 URL 参数切换页面
|
||||
|
||||
Loading…
Reference in New Issue
Block a user