coder-xiaomo/tools
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity GitHub Gitee

添加热搜数据预览网页

Browse Source
This commit is contained in:
程序员小墨 2022-07-25 18:01:26 +08:00
parent ec0ed88244
commit 08615413c9
2 changed files with 105 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -8,6 +8,10 @@
您可以将本项目代码部署在服务器上（在本地运行也可），程序会每隔一分钟拉取一次微博热搜数据，并保存为 `json` 格式文件。 您可以将本项目代码部署在服务器上（在本地运行也可），程序会每隔一分钟拉取一次微博热搜数据，并保存为 `json` 格式文件。
## 数据预览
在部署并启动项目后，您可以在浏览器中打开 `html/index.html` 文件实时预览当前热搜。
## 数据来源 ## 数据来源
微博热搜接口：https://weibo.com/ajax/statuses/hot_band 微博热搜接口：https://weibo.com/ajax/statuses/hot_band

101
html/index.html Normal file
View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html lang="en">
<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>
<style>
#list {
width: 100%;
text-align: center;
border-spacing: 0;
}
#list td {
margin: 0;
border: 0.5px solid black;
}
</style>
</head>
<body>
<p id="latestUpdateTime"></p>
<table id="list"></table>
<script>
var getDateCount = 0;
getData();
window.onload = function () {
setInterval(getData, 10 * 1000);
};
function getData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "../data/latest.json?t=" + Date.now(), true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
/**
* 更新时间
*/
document.getElementById("latestUpdateTime").innerHTML =
"数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
"拉取次数：" + ++getDateCount + "<br/>" +
"热榜更新时间：" + new Date(data.update_time).toLocaleString();
/**
* 渲染热搜列表
*/
let hotBandList = data.data;
var str = [];
// 渲染表格
str.push(`<tr>
<td>编号</td>
<td>类型</td>
<td>热搜</td>
<td>表情</td>
<td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>
<td>分类</td>
<td>热搜上线时间</td>
<td>是否新热搜</td>
<td>热搜详情</td>
<td>mid</td>
</tr>`);
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><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>${hotBand.emoticon}</td>
<td>
<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 >
<td>${hotBand.category.map((c) => `<nobr>${c}</nobr>`).join('<br>')}</td>
<td style="font-size: 10px;">${new Date(hotBand.onboard_time * 1000).toLocaleString()}</td>
<td>${hotBand.more.is_new == 1 ? "是" : "否"}</td>
<td>
<div style="font-size:10px; max-width: 300px; display: inline-block;">${hotBand.more.detail}</div>
</td>
<td style="font-size: 14px;">${hotBand.more.mid}</td>
</tr >`);
}
document.getElementById('list').innerHTML = str.join('');
}
}
}
</script>
</body>
</html>