更新html
This commit is contained in:
parent
317510a794
commit
61bcb1f298
143
html/index.html
143
html/index.html
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
#list tr {
|
||||
/* height: 50px; */
|
||||
height: min(1.85rem, 50px);
|
||||
}
|
||||
|
||||
#list td {
|
||||
@ -41,13 +41,41 @@
|
||||
<h1>微博热搜榜</h1>
|
||||
<hr>
|
||||
<div>
|
||||
过滤：
|
||||
显示字段：
|
||||
<label for="show_emoticon">
|
||||
<input type="checkbox" class="filter_checkbox" name="show_emoticon" id="show_emoticon"
|
||||
detailed-checked="true">热搜表情
|
||||
</label>
|
||||
<label for="show_num">
|
||||
<input type="checkbox" class="filter_checkbox" name="show_num" id="show_num" checked="true"
|
||||
concise-checked="true" detailed-checked="true">热度
|
||||
</label>
|
||||
<label for="show_category">
|
||||
<input type="checkbox" class="filter_checkbox" name="show_category" id="show_category" checked="true"
|
||||
detailed-checked="true">分类
|
||||
</label>
|
||||
<label for="show_onboard_time">
|
||||
<input type="checkbox" class="filter_checkbox" name="show_onboard_time" id="show_onboard_time"
|
||||
checked="true" detailed-checked="true">上线时间
|
||||
</label>
|
||||
<label for="show_is_new">
|
||||
<input type="checkbox" class="filter_checkbox" name="show_is_new" id="show_is_new"
|
||||
detailed-checked="true">是否新热搜
|
||||
</label>
|
||||
<label for="show_detail">
|
||||
<input type="checkbox" class="filter_checkbox" name="show_detail" id="show_detail">显示热搜详情
|
||||
<input type="checkbox" class="filter_checkbox" name="show_detail" id="show_detail"
|
||||
detailed-checked="true">热搜详情
|
||||
</label>
|
||||
<label for="show_mid">
|
||||
<input type="checkbox" class="filter_checkbox" name="show_mid" id="show_mid">显示mid
|
||||
<input type="checkbox" class="filter_checkbox" name="show_mid" id="show_mid">mid
|
||||
</label>
|
||||
<br>
|
||||
<button id="btn_show_all">全选</button>
|
||||
<button id="btn_show_none">全不选</button>
|
||||
|
|
||||
<button id="btn_show_concise">简洁</button>
|
||||
<button id="btn_show_default">普通</button>
|
||||
<button id="btn_show_detailed">详细</button>
|
||||
</div>
|
||||
</div>
|
||||
<p id="latestUpdateTime" style="font-size: 12px; display: inline-block; vertical-align: middle;"></p>
|
||||
@ -61,15 +89,63 @@
|
||||
// 拉取下来的数据
|
||||
let hotBandData;
|
||||
|
||||
// 刷新按钮
|
||||
// 按钮
|
||||
const btnShowAll = document.getElementById('btn_show_all');
|
||||
const btnShowNone = document.getElementById('btn_show_none');
|
||||
const btnShowConcise = document.getElementById('btn_show_concise');
|
||||
const btnShowDefault = document.getElementById('btn_show_default');
|
||||
const btnShowDetailed = document.getElementById('btn_show_detailed');
|
||||
|
||||
const btnRefresh = document.getElementById('btn_refresh');
|
||||
|
||||
// 复选框
|
||||
const filterCheckbox = document.getElementsByClassName("filter_checkbox");
|
||||
|
||||
const showEmoticon = document.getElementById("show_emoticon");
|
||||
const showNum = document.getElementById("show_num");
|
||||
const showCategory = document.getElementById("show_category");
|
||||
const showOnboardTime = document.getElementById("show_onboard_time");
|
||||
const showIsNew = document.getElementById("show_is_new");
|
||||
const showDetail = document.getElementById("show_detail");
|
||||
const showMid = document.getElementById("show_mid");
|
||||
|
||||
// 绑定按钮点击事件
|
||||
btnShowAll.addEventListener('click', function () {
|
||||
for (let i = 0; i < filterCheckbox.length; i++) {
|
||||
const element = filterCheckbox[i];
|
||||
element.checked = true;
|
||||
}
|
||||
render();
|
||||
});
|
||||
btnShowNone.addEventListener('click', function () {
|
||||
for (let i = 0; i < filterCheckbox.length; i++) {
|
||||
const element = filterCheckbox[i];
|
||||
element.checked = false;
|
||||
}
|
||||
render();
|
||||
});
|
||||
btnShowConcise.addEventListener('click', function () {
|
||||
for (let i = 0; i < filterCheckbox.length; i++) {
|
||||
const element = filterCheckbox[i];
|
||||
element.checked = element.getAttribute('concise-checked') === 'true';
|
||||
}
|
||||
render();
|
||||
});
|
||||
btnShowDefault.addEventListener('click', function () {
|
||||
for (let i = 0; i < filterCheckbox.length; i++) {
|
||||
const element = filterCheckbox[i];
|
||||
element.checked = element.getAttribute('checked') === 'true';
|
||||
}
|
||||
render();
|
||||
});
|
||||
btnShowDetailed.addEventListener('click', function () {
|
||||
for (let i = 0; i < filterCheckbox.length; i++) {
|
||||
const element = filterCheckbox[i];
|
||||
element.checked = element.getAttribute('detailed-checked') === 'true';
|
||||
}
|
||||
render();
|
||||
});
|
||||
|
||||
btnRefresh.onclick = function () {
|
||||
getData();
|
||||
document.getElementById("update-finish-info").style.display = "";
|
||||
@ -84,10 +160,27 @@
|
||||
for (let i = 0; i < filterCheckbox.length; i++) {
|
||||
console.log(filterCheckbox[i]);
|
||||
filterCheckbox[i].onchange = function () {
|
||||
render(hotBandData);
|
||||
render();
|
||||
};
|
||||
}
|
||||
|
||||
// 根据屏幕判断要显示哪些字段
|
||||
// 此时还未拉取数据，所以进入 render 函数会直接返回，不会多次渲染
|
||||
let initWidth = document.body.offsetWidth;
|
||||
console.log(initWidth);
|
||||
if (initWidth < 400) {
|
||||
btnShowNone.click();
|
||||
btnShowNone.innerHTML += "(默认)";
|
||||
} else if (initWidth < 600) {
|
||||
btnShowConcise.click();
|
||||
btnShowConcise.innerHTML += "(默认)";
|
||||
} else if (initWidth < 1900) {
|
||||
btnShowDefault.click();
|
||||
btnShowDefault.innerHTML += "(默认)";
|
||||
} else {
|
||||
btnShowDetailed.click();
|
||||
btnShowDetailed.innerHTML += "(默认)";
|
||||
}
|
||||
|
||||
// 网页加载后加载榜单
|
||||
getData();
|
||||
@ -103,18 +196,20 @@
|
||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||
hotBandData = JSON.parse(xhr.responseText);
|
||||
console.log(hotBandData);
|
||||
render(hotBandData);
|
||||
|
||||
// 更新时间
|
||||
document.getElementById("latestUpdateTime").innerHTML =
|
||||
"数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
|
||||
"热榜更新时间：" + new Date(hotBandData.update_time).toLocaleString();
|
||||
|
||||
// 渲染榜单
|
||||
render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function render(hotBandData) {
|
||||
/**
|
||||
* 更新时间
|
||||
*/
|
||||
document.getElementById("latestUpdateTime").innerHTML =
|
||||
"数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
|
||||
"热榜更新时间：" + new Date(hotBandData.update_time).toLocaleString();
|
||||
function render() {
|
||||
if (!hotBandData) return;
|
||||
|
||||
/**
|
||||
* 渲染热搜列表
|
||||
@ -127,11 +222,11 @@
|
||||
<tr class="thead" style="top: 0; background-color: white; position: sticky;">
|
||||
<td>编号</td>
|
||||
<td>热搜</td>
|
||||
<td>表情</td>
|
||||
<td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>
|
||||
<td>分类</td>
|
||||
<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>" : ""}
|
||||
</tr>
|
||||
@ -154,9 +249,12 @@
|
||||
</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/>
|
||||
@ -166,15 +264,22 @@
|
||||
</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 ? `
|
||||
<!-- 热搜详情 -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user