js: 背包统计采集系统 中 对JS脚本产出档案剖析用网页v1.5 (#1963)

* Delete repo/js/背包材料统计/基于吉吉喵的JS脚本「背包材料统计」,对产出的latest_record.txt档案进行剖析用的网页@由蜜柑魚制作.html

* 更新 js: 背包统计采集系统 中 对JS脚本产出档案剖析用网页v1.5

修正上傳錯誤檔案
This commit is contained in:
this-Fish
2025-09-21 19:39:03 +08:00
committed by GitHub
parent b0ca08b6bc
commit a92dab1ae3
2 changed files with 156 additions and 1238 deletions

View File

@@ -14,6 +14,7 @@
w = 向上滚动
s = 向下滚动
~ = 切換淺色模式,深色模式
J = 顯示無
1.1
@@ -26,6 +27,14 @@
1.4
新增 依据背包材料数量排序
点击表格中的标题[较新日斯],切换依据背包材料数量 由少至多 或 由多至少 排序
1.5
1.修改矿石数量超过99000时才标记顏色
特定矿石:铁块、白铁块、水晶块、星银矿石、紫晶块、萃凝晶、虹滴晶、魔晶块
2.新增 显示无变化材料
按J键切换显示无变化材料
默认隐藏无变化材料
显示无变化材料时,表格会变长,请耐心等待加载完成
3.月之一版本材料列表更新
-->
<!DOCTYPE html>
<html lang="zh-TW">
@@ -394,7 +403,18 @@
}
}
/* 新增样式:数量超过9000的色标记 */
/* 数量超过9000的色标记 */
.medium-quantity {
color: orange !important;
font-weight: bold;
}
/* 深色模式下的橙色样式 */
body.dark-mode .medium-quantity {
color: #ffa500 !important;
}
/* 数量超过9500的红色标记 */
.high-quantity {
color: red !important;
font-weight: bold;
@@ -430,10 +450,14 @@
.sortable.asc::after {
content: "↑";
color: inherit;
opacity: 1;
}
.sortable.desc::after {
content: "↓";
color: inherit;
opacity: 1;
}
/* 稀有度背景色样式 */
@@ -569,11 +593,38 @@
body.dark-mode .sortable.inactive::after {
color: #aaa;
}
.no-change-row {
display: none;
}
.show-no-change .no-change-row {
display: table-row;
}
.status-indicator {
position: fixed;
top: 60px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 12px;
border-radius: 20px;
font-size: 0.8rem;
z-index: 1000;
display: none;
}
body.dark-mode .status-indicator {
background: rgba(255, 255, 255, 0.2);
color: #e0e0e0;
}
</style>
</head>
<body>
<div class="theme-indicator" id="themeIndicator">深色模式已启用</div>
<div class="status-indicator" id="statusIndicator">显示无变化材料</div>
<div class="container">
<div id="resultsSection">
<div id="dropZone">
@@ -613,7 +664,7 @@
'地脉的新芽', '雾虚灯芯', '漫游者的盛放之花', '黑晶号角', '混沌锚栓', '混沌炉心',
'辉光棱晶', '隐兽鬼爪', '初生的浊水幻灵', '异界生命核', '役人的时时刻刻', '渊光鳍翅',
'未熄的剑柄', '秘源真芯', '意志巡游的符像', '聚燃的游像眼', '迷光的蜷叶之心', '明燃的棱状壳',
'大英雄的经验'
'大英雄的经验', '幽雾兜盔', '霜夜的煌荣', '繁光躯外骸'
];
// 藍
@@ -624,7 +675,7 @@
'密固的横脊', '地脉的枯叶', '混浊棱晶', '雾虚草囊', '特工祭刀', '黑铜号角', '混沌回路',
'混沌模块', '何人所珍藏之花', '隐兽利爪', '浊水的一掬', '外世突触', '役人的制式怀表',
'月色鳍翅', '裂断的剑柄', '秘源机鞘', '意志明晰的寄偶', '聚燃的命种', '惑光的阔叶', '蕴热的背壳',
'冒险家的经验'
'冒险家的经验', '霜镌的执凭', '精制机轴', '幽雾片甲', '霜夜的柔辉', '稀光遗骼'
];
// 綠
@@ -634,15 +685,26 @@
'老练的坚齿', '战士的铁哨', '混沌机关', '黯淡棱镜', '晦暗刻像', '沉重号角', '地脉的旧枝',
'混沌装置', '雾虚花粉', '猎兵祭刀', '脆弱的骨片', '隐兽指爪', '残毁的横脊', '来自何处的待放之花',
'破缺棱晶', '混沌容器', '浊水的一滴', '隙间之核', '老旧的役人怀表', '羽状鳍翅', '残毁的剑柄',
'秘源轴', '意志破碎的残片', '聚燃的石块', '折光的胚芽', '冷裂壳块', '流浪者的经验'
'秘源轴', '意志破碎的残片', '聚燃的石块', '折光的胚芽', '冷裂壳块', '流浪者的经验', '精致的执凭',
'加固机轴', '幽雾化形', '霜夜的残照', '失光块骨'
];
// 灰
const RARITY_2_ITEMS = [
'牢固的箭簇', '史莱姆凝液', '寻宝鸦印', '新兵的徽记', '破损的面具', '导能绘卷', '骗骗花蜜',
'破旧的刀镡', '浮游干核', '蕈兽孢子', '褪色红绸', '啮合齿轮', '异海凝珠', '稚嫩的尖齿', '卫从的木哨'
'破旧的刀镡', '浮游干核', '蕈兽孢子', '褪色红绸', '啮合齿轮', '异海凝珠', '稚嫩的尖齿', '卫从的木哨',
'磨损的执凭', '毁损机轴'
];
// 特定矿石列表(需要特殊数量标记)
const SPECIAL_ORES = [
'铁块', '白铁块', '水晶块', '星银矿石',
'紫晶块', '萃凝晶', '虹滴晶', '魔晶块'
];
// 在脚本开头添加全局变量
let showNoChangeItems = false;
window.onload = function () {
const now = new Date();
const currentHour = now.getHours();
@@ -804,13 +866,8 @@
records[categoryKey] = [];
}
records[categoryKey].push({
timestamp: currentTimestamp, // 使用已存储的时间戳
items: { ...currentItems }
});
console.log("保存记录:", {
category: categoryKey,
timestamp: currentTimestamp,
items: Object.keys(currentItems)
items: { ...currentItems }
});
}
@@ -852,13 +909,7 @@
timestamp: currentTimestamp,
items: { ...currentItems }
});
console.log("保存记录:", {
category: categoryKey,
timestamp: currentTimestamp,
items: Object.keys(currentItems)
});
}
console.log(records)
return records;
}
@@ -887,12 +938,32 @@
return 1; // 其他为1最低
}
// 检查数量是否需要标记
function getQuantityClass(itemName, quantity) {
if (SPECIAL_ORES.includes(itemName)) {
// 特殊矿石
if (quantity >= 99500) return 'high-quantity';
if (quantity >= 99000) return 'medium-quantity';
} else {
// 普通材料
if (quantity >= 9500) return 'high-quantity';
if (quantity >= 9000) return 'medium-quantity';
}
return '';
}
// 显示解析结果
function displayResults(records) {
resultsContainer.innerHTML = ``;
// 添加显示状态类
if (showNoChangeItems) {
resultsContainer.classList.add('show-no-change');
} else {
resultsContainer.classList.remove('show-no-change');
}
for (const [category, scans] of Object.entries(records)) {
// 只处理有至少两次扫描的类别
if (scans.length < 2) continue;
const latestScan = scans[0];
const previousScan = scans[1];
@@ -901,27 +972,26 @@
const section = document.createElement('div');
section.className = 'category-section';
section.innerHTML = `
<div class="category-header">
<div class="category-header">
<h3>${category}</h3>
<span class="toggle-btn">▼</span>
</div>
<table class="material-table">
<thead>
<tr>
<th class="item-name-header">
物品名
<button class="rare-sort-btn">稀有度排序</button>
</th>
<th>${previousScan.timestamp}</th>
<!-- 添加 inactive 类表示初始未激活状态 -->
<th class="sortable inactive" data-sort-type="newQty" data-sort="none">${latestScan.timestamp}</th>
<th class="sortable" data-sort-type="change" data-sort="desc">变更数量</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
`;
</div>
<table class="material-table">
<thead>
<tr>
<th class="item-name-header">
物品名
<button class="rare-sort-btn">稀有度排序</button>
</th>
<th>${previousScan.timestamp}</th>
<th class="sortable inactive" data-sort-type="newQty" data-sort="none">${latestScan.timestamp}</th>
<th class="sortable" data-sort-type="change" data-sort="desc">变更数量</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
`;
const tbody = section.querySelector('tbody');
const toggleBtn = section.querySelector('.category-header');
@@ -1005,16 +1075,15 @@
for (const [item, latestQty] of Object.entries(latestScan.items)) {
const previousQty = previousScan.items[item];
if (previousQty === undefined ||
latestQty === '?' ||
previousQty === '?' ||
latestQty === previousQty) {
// 检查是否无法比较(有问号或不存在)
if (previousQty === undefined || latestQty === '?' || previousQty === '?') {
continue;
}
const change = latestQty - previousQty;
const changeClass = change > 0 ? 'increase' : 'decrease';
const changeSign = change > 0 ? '+' : '';
const changeClass = change > 0 ? 'increase' : (change < 0 ? 'decrease' : 'no-change');
const changeSign = change > 0 ? '+' : (change < 0 ? '' : '');
// 确定物品的稀有度类
let rarityClass = '';
@@ -1028,14 +1097,22 @@
rarityClass = 'rarity-2';
}
// 检查数量是否超过9000
// 获取数量标记类
const prevQuantityClass = getQuantityClass(item, previousQty);
const latestQuantityClass = getQuantityClass(item, latestQty);
const row = document.createElement('tr');
// 为无变化材料添加特殊类
if (change === 0) {
row.classList.add('no-change-row');
}
row.innerHTML = `
<td class="${rarityClass}">${item}</td>
<td class="${previousQty > 9000 ? 'high-quantity' : ''}">${previousQty}</td>
<td class="${latestQty > 9000 ? 'high-quantity' : ''}">${latestQty}</td>
<td class="${changeClass}">${changeSign}${change}</td>
`;
<td class="${rarityClass}">${item}</td>
<td class="${prevQuantityClass}">${previousQty}</td>
<td class="${latestQuantityClass}">${latestQty}</td>
<td class="${changeClass}">${changeSign}${change}</td>
`;
// 存储稀有度等级用于排序
row.dataset.rarity = getRarityLevel(item);
@@ -1043,7 +1120,7 @@
tbody.appendChild(row);
}
// 如果有变化才添加到结果
// 如果有数据才添加到结果
if (tbody.children.length > 0) {
resultsContainer.appendChild(section);
// 初始排序(由多到少)
@@ -1111,7 +1188,7 @@
tbody.appendChild(row);
});
}
// 显示错误信息
function showError(message) {
errorMessage.textContent = message;
@@ -1119,12 +1196,39 @@
}
});
// 添加切换显示无变化材料的函数
function toggleNoChangeItems() {
showNoChangeItems = !showNoChangeItems;
// 更新结果显示
const resultsContainer = document.getElementById('resultsContainer');
if (showNoChangeItems) {
resultsContainer.classList.add('show-no-change');
} else {
resultsContainer.classList.remove('show-no-change');
}
// 显示状态提示
const statusIndicator = document.getElementById('statusIndicator');
statusIndicator.textContent = showNoChangeItems ?
'显示无变化材料 (按J隐藏)' :
'隐藏无变化材料 (按J显示)';
statusIndicator.style.display = 'block';
// 3秒后隐藏提示
setTimeout(() => {
statusIndicator.style.display = 'none';
}, 2000);
}
window.addEventListener('keydown', function (e) {
const scrollAmount = 150; // 滚动距离
if (e.key.toLowerCase() === 'w') {
window.scrollBy({ top: -scrollAmount, behavior: 'smooth' });
} else if (e.key.toLowerCase() === 's') {
window.scrollBy({ top: scrollAmount, behavior: 'smooth' });
} else if (e.key === 'j' || e.key === 'J') {
toggleNoChangeItems();
}
});
@@ -1168,4 +1272,4 @@
</script>
</body>
</html>
</html>