添加热搜数据预览网页
This commit is contained in:
@@ -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
101
html/index.html
Normal 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>
|
||||||
Reference in New Issue
Block a user