更新html页面
This commit is contained in:
145
html/index.html
145
html/index.html
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="cn">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
@@ -11,90 +11,187 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
border: 0.4px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#list tr {
|
||||||
|
/* height: 50px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
#list td {
|
#list td {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0.5px solid black;
|
border: 0.4px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 热搜的 label 样式 */
|
||||||
|
.hotband-label {
|
||||||
|
color: white;
|
||||||
|
padding: 3px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 10px;
|
||||||
|
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<p id="latestUpdateTime"></p>
|
<div style="text-align: center;">
|
||||||
|
<h1>微博热搜榜</h1>
|
||||||
|
<hr>
|
||||||
|
<div>
|
||||||
|
过滤：
|
||||||
|
<label for="show_detail">
|
||||||
|
<input type="checkbox" class="filter_checkbox" name="show_detail" id="show_detail">显示热搜详情
|
||||||
|
</label>
|
||||||
|
<label for="show_mid">
|
||||||
|
<input type="checkbox" class="filter_checkbox" name="show_mid" id="show_mid">显示mid
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p>
|
||||||
|
<button id="btn_refresh">重新拉取</button>
|
||||||
|
<span id="update-finish-info" style="color: green; font-weight: bold; display: none;">数据已更新</span>
|
||||||
<table id="list"></table>
|
<table id="list"></table>
|
||||||
<script>
|
<script>
|
||||||
var getDateCount = 0;
|
/**
|
||||||
|
* 全局变量
|
||||||
|
*/
|
||||||
|
// 拉取下来的数据
|
||||||
|
let hotBandData;
|
||||||
|
|
||||||
|
// 刷新按钮
|
||||||
|
const btnRefresh = document.getElementById('btn_refresh');
|
||||||
|
|
||||||
|
// 复选框
|
||||||
|
const filterCheckbox = document.getElementsByClassName("filter_checkbox");
|
||||||
|
const showDetail = document.getElementById("show_detail");
|
||||||
|
const showMid = document.getElementById("show_mid");
|
||||||
|
|
||||||
|
// 绑定按钮点击事件
|
||||||
|
btnRefresh.onclick = function () {
|
||||||
getData();
|
getData();
|
||||||
window.onload = function () {
|
document.getElementById("update-finish-info").style.display = "";
|
||||||
setInterval(getData, 10 * 1000);
|
btnRefresh.style.display = "none";
|
||||||
|
setTimeout(function () {
|
||||||
|
document.getElementById("update-finish-info").style.display = "none";
|
||||||
|
btnRefresh.style.display = "";
|
||||||
|
}, 1000);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 绑定复选框改变事件
|
||||||
|
for (let i = 0; i < filterCheckbox.length; i++) {
|
||||||
|
console.log(filterCheckbox[i]);
|
||||||
|
filterCheckbox[i].onchange = function () {
|
||||||
|
render(hotBandData);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 网页加载后加载榜单
|
||||||
|
getData();
|
||||||
|
|
||||||
|
// 定时刷新
|
||||||
|
// setInterval(getData, 10 * 1000);
|
||||||
|
|
||||||
function getData() {
|
function getData() {
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open("GET", "../data/latest.json?t=" + Date.now(), true);
|
xhr.open("GET", "../data/latest.json?t=" + Date.now(), true);
|
||||||
xhr.send();
|
xhr.send();
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function () {
|
||||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||||
var data = JSON.parse(xhr.responseText);
|
hotBandData = JSON.parse(xhr.responseText);
|
||||||
console.log(data);
|
console.log(hotBandData);
|
||||||
|
render(hotBandData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function render(hotBandData) {
|
||||||
/**
|
/**
|
||||||
* 更新时间
|
* 更新时间
|
||||||
*/
|
*/
|
||||||
document.getElementById("latestUpdateTime").innerHTML =
|
document.getElementById("latestUpdateTime").innerHTML =
|
||||||
"数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
|
"数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
|
||||||
"拉取次数：" + ++getDateCount + "<br/>" +
|
"热榜更新时间：" + new Date(hotBandData.update_time).toLocaleString();
|
||||||
"热榜更新时间：" + new Date(data.update_time).toLocaleString();
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 渲染热搜列表
|
* 渲染热搜列表
|
||||||
*/
|
*/
|
||||||
let hotBandList = data.data;
|
let hotBandList = hotBandData.data;
|
||||||
|
|
||||||
var str = [];
|
var str = [];
|
||||||
// 渲染表格
|
// 渲染表格
|
||||||
str.push(`<tr>
|
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>表情</td>
|
<td>表情</td>
|
||||||
<td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>
|
<td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>
|
||||||
<td>分类</td>
|
<td>分类</td>
|
||||||
<td>热搜上线时间</td>
|
<td>热搜上线时间</td>
|
||||||
<td>是否新热搜</td>
|
<td>是否新热搜</td>
|
||||||
<td>热搜详情</td>
|
${showDetail.checked ? "<td>热搜详情</td>" : ""}
|
||||||
<td>mid</td>
|
${showMid.checked ? "<td>mid</td>" : ""}
|
||||||
</tr>`);
|
</tr>
|
||||||
|
</thead>`);
|
||||||
|
str.push(`<tbody>`);
|
||||||
for (var i = 0; i < hotBandList.length; i++) {
|
for (var i = 0; i < hotBandList.length; i++) {
|
||||||
const hotBand = hotBandList[i];
|
const hotBand = hotBandList[i];
|
||||||
let hotDelta = hotBand.num - hotBand.raw_hot;
|
let hotDelta = hotBand.num - hotBand.raw_hot;
|
||||||
str.push(`<tr>
|
str.push(`<tr>
|
||||||
|
<!-- 编号 -->
|
||||||
<td>${i + 1}</td>
|
<td>${i + 1}</td>
|
||||||
<td><span style="background-color: ${hotBand.more.icon_desc_color}; color: white; padding: 3px; border-radius: 6px; font-size: 10px;">${hotBand.label_name}</span></td>
|
|
||||||
<td><a href="${hotBand.url}" target="_blank">${hotBand.word}</a></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>
|
||||||
|
|
||||||
|
<!-- 表情 -->
|
||||||
<td>${hotBand.emoticon}</td>
|
<td>${hotBand.emoticon}</td>
|
||||||
<td>
|
|
||||||
|
<!-- 热度 -->
|
||||||
|
<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: 14px;">${hotDelta == 0 ? hotBand.num : `${hotBand.num} / ${hotBand.raw_hot}`}</span></nobr><br/>
|
||||||
<nobr>
|
<nobr>
|
||||||
<span style="font-size: 10px; color: ${hotDelta > 0 ? "red" : "green"}; font-weight: bold;">
|
<span style="font-size: 10px; color: ${hotDelta > 0 ? "red" : "green"}; font-weight: bold;">
|
||||||
${hotDelta != 0 ? `(官方调控 ${hotDelta > 0 ? "+" : ""}${hotDelta})` : ""}
|
${hotDelta != 0 ? `(官方调控 ${hotDelta > 0 ? "+" : ""}${hotDelta})` : ""}
|
||||||
</span>
|
</span>
|
||||||
</nobr>
|
</nobr>
|
||||||
</td >
|
</td>
|
||||||
<td>${hotBand.category.map((c) => `<nobr>${c}</nobr>`).join('<br>')}</td>
|
|
||||||
|
<!-- 分类 -->
|
||||||
|
<td style="font-size: 10px;">${hotBand.category.map((c) => `<nobr>${c}</nobr>`).join('；')}</td>
|
||||||
|
|
||||||
|
<!-- 热搜上线时间 -->
|
||||||
<td style="font-size: 10px;">${new Date(hotBand.onboard_time * 1000).toLocaleString()}</td>
|
<td style="font-size: 10px;">${new Date(hotBand.onboard_time * 1000).toLocaleString()}</td>
|
||||||
<td>${hotBand.more.is_new == 1 ? "是" : "否"}</td>
|
|
||||||
|
<!-- 是否新热搜 -->
|
||||||
|
<td>${hotBand.more.is_new == 1 ? "是" : ""}</td>
|
||||||
|
|
||||||
|
${showDetail.checked ? `
|
||||||
|
<!-- 热搜详情 -->
|
||||||
<td>
|
<td>
|
||||||
<div style="font-size:10px; max-width: 300px; display: inline-block;">${hotBand.more.detail}</div>
|
<div style="font-size:10px; max-width: 300px; display: inline-block;">${hotBand.more.detail}</div>
|
||||||
</td>
|
</td>
|
||||||
|
` : ""}
|
||||||
|
|
||||||
|
${showMid.checked ? `
|
||||||
|
<!-- mid -->
|
||||||
<td style="font-size: 14px;">${hotBand.more.mid}</td>
|
<td style="font-size: 14px;">${hotBand.more.mid}</td>
|
||||||
|
` : ""}
|
||||||
</tr >`);
|
</tr >`);
|
||||||
}
|
}
|
||||||
|
str.push(`</tbody>`);
|
||||||
document.getElementById('list').innerHTML = str.join('');
|
document.getElementById('list').innerHTML = str.join('');
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user