无聊。手搓了一款可以查询QQ空间等级升级所需积分的查询表
项目截图:

代码太长了,分三段
CSS样式
♾️ css 代码:<style>
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
max-width: 400px;
margin: 0 auto;
padding: 20px 10px;
}
.header {
text-align: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #e1e1e1;
}
h1 {
color: #2c7be5;
margin: 0;
font-size: 1.8rem;
font-weight: 500;
}
h2 {
color: #6c757d;
margin: 10px 0 0;
font-size: 1rem;
font-weight: 400;
}
.tool-card {
background: white;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tool-title {
font-size: 1.1rem;
color: #495057;
margin-bottom: 12px;
display: flex;
align-items: center;
}
.input-group {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
input[type="number"] {
flex: 1;
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 0.95rem;
}
button {
padding: 8px 16px;
background-color: #2c7be5;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.95rem;
transition: background 0.2s;
}
button:hover {
background-color: #1a68d1;
}
.table-container {
overflow-x: auto;
margin-bottom: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 15px;
text-align: center;
border-bottom: 1px solid #e9ecef;
}
th {
background-color: #f8f9fa;
color: #495057;
font-weight: 500;
}
tr:hover td {
background-color: #f8fafd;
}
/* 等级图标 */
.qz_qzone_lv {
display: inline-block;
width: 18px;
height: 18px;
background-image: url('/3.png');
background-repeat: no-repeat;
margin: 0 1px;
vertical-align: middle;
}
.qz_qzone_lv_1 { background-position: 0 0; background-size: 342px 18px; }
.qz_qzone_lv_2 { background-position: -20.25px 0; background-size: 342px 18px; }
.qz_qzone_lv_3 { background-position: -40.5px 0; background-size: 342px 18px; }
.qz_qzone_lv_4 { background-position: -60.75px 0; background-size: 342px 18px; }
.pagination {
display: flex;
justify-content: center;
gap: 6px;
margin: 20px 0;
}
.page-btn {
padding: 6px 12px;
background: rgb(54, 54, 54);
border: 1px solid #dee2e6;
border-radius: 4px;
cursor: pointer;
}
.page-btn:hover {
background: #adaeaf;
border-color: #2c7be5;
}
/* 响应式调整 */
@media (max-width: 600px) {
body {
padding: 15px;
}
th, td {
padding: 10px 12px;
}
.input-group {
flex-direction: column;
}
}
.friend-links {
position: fixed;
right: 300px;
top: 50%;
transform: translateY(-50%);
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
width: 120px;
}
.friend-links h3 {
margin-top: 0;
font-size: 1rem;
color: #495057;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
}
.friend-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.friend-links li {
margin-bottom: 8px;
}
.friend-links a {
color: #2c7be5;
text-decoration: none;
font-size: 0.9rem;
}
.friend-links a:hover {
text-decoration: underline;
}
/* 响应式调整 */
@media (max-width: 1000px) {
.friend-links {
position: static;
transform: none;
width: auto;
margin-top: 20px;
}
}
</style>
index主体
♾️ html 代码:<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ空间等级查询</title>
</head>
<body>
<div class="header">
<h1>QQ空间等级数据表</h1>
<h2>1-600级完整数据 · 计算公式:(n-7)²×10 (n≥10)</h2>
</div>
<div class="tool-card">
<div class="tool-title">等级查询</div>
<div class="input-group">
<input type="number" id="levelSearch" placeholder="输入等级(1-600)" min="1" max="600">
<button type="button" id="searchButton">查找</button>
</div>
<div class="tool-title">升级所需积分</div>
<div class="input-group">
<input type="number" id="level1" placeholder="等级1" min="1" max="600">
<input type="number" id="level2" placeholder="等级2" min="1" max="600">
<button onclick="compareLevels()">升级查询</button>
</div>
<div id="compare-result"></div>
</div>
<div class="table-container">
<table id="levelTable">
<thead>
<tr>
<th>等级</th>
<th>所需积分</th>
<th>等级图标</th>
<th>计算公式</th>
</tr>
</thead>
<tbody id="levelData">
<!-- 数据通过js动态生成 -->
</tbody>
</table>
</div>
<div class="friend-links">
<h3>友情链接</h3>
<ul>
<li><a href="https://lb5.net" target="_blank">小野博客</a></li>
<li><a href="https://234.tw" target="_blank">深蓝丶</a></li>
<li><a href="https://qzone.qq.com" target="_blank">QQ空间官网</a></li>
<li><a href="https://im.qq.com" target="_blank">腾讯QQ</a></li>
<li><a href="https://www.qq.com" target="_blank">腾讯网</a></li>
</ul>
</div>
</body>
</html>
javascript
♾️ javascript 代码:<script>
// 当前显示的范围
let currentStart = 1;
const pageSize = 1;
// 官方等级积分数据
const officialLevelData = {
1: 5, 2: 10, 3: 15, 4: 20, 5: 30, 6: 40, 7: 50, 8: 60, 9: 75,
10: 90, 11: 160, 12: 250, 13: 360, 14: 490, 15: 640, 16: 810,
32: 6250, 48: 16810, 64: 32490, 128: 146410, 192: 342250
};
// 等级积分计算
function calculatePoints(level) {
return officialLevelData[level] || Math.pow(level - 7, 2) * 10;
}
// 获取公式描述
function getFormulaDescription(level) {
if (officialLevelData.hasOwnProperty(level)) {
return '官方固定值';
}
if (level <= 15) {
return `(${level}-7)² × 10`;
}
return '系统估算值';
}
// 等级对比
function compareLevels() {
const level1 = document.getElementById('level1').value;
const level2 = document.getElementById('level2').value;
if (!level1 || !level2) {
document.getElementById('compare-result').innerHTML =
`<p style="color:#ff4757;">请先输入需要查询的两个等级</p>`;
return;
}
const diff = calculatePoints(level2) - calculatePoints(level1);
const formattedDiff = diff >= 0 ? `+${diff.toLocaleString()}` : diff.toLocaleString();
document.getElementById('compare-result').innerHTML = `
<p><strong>积分差距</strong>: <span style="color:${diff >= 0 ? '#2ed573' : '#ff4757'}">${formattedDiff}</span></p>
<p><strong>图标变化</strong>: ${generateLevelIcon(level1)} → ${generateLevelIcon(level2)}</p>
<p><strong>升级建议</strong>: 需要每天获得 ${Math.ceil(diff/30)} 积分,约 ${Math.ceil(diff/500)} 天</p>
`;
}
// 生成等级图标
function generateLevelIcon(level) {
if (level <= 0) return '';
let icons = '';
let remaining = level;
// 1. 计算金色苹果(64级)
const goldApples = Math.floor(remaining / 64);
if (goldApples > 0) {
icons += '<span class="qz_qzone_lv qz_qzone_lv_4"></span>'.repeat(goldApples);
remaining %= 64;
}
// 2. 计算红色苹果(16级)
const redApples = Math.floor(remaining / 16);
if (redApples > 0) {
icons += '<span class="qz_qzone_lv qz_qzone_lv_3"></span>'.repeat(redApples);
remaining %= 16;
}
// 3. 计算花朵(4级)
const flowers = Math.floor(remaining / 4);
if (flowers > 0) {
icons += '<span class="qz_qzone_lv qz_qzone_lv_2"></span>'.repeat(flowers);
remaining %= 4;
}
// 4. 计算叶子(1级)
if (remaining > 0) {
icons += '<span class="qz_qzone_lv qz_qzone_lv_1"></span>'.repeat(remaining);
}
return icons || '<span style="color:#6c757d">无</span>';
}
// 生成等级数据行
function generateLevelRow(level) {
const points = calculatePoints(level);
return `
<tr data-level="${level}">
<td>${level}</td>
<td>${points.toLocaleString()}</td>
<td>${generateLevelIcon(level)}</td>
<td>${getFormulaDescription(level)}</td>
</tr>
`;
}
// 渲染表格数据
function renderTable() {
const tableBody = document.getElementById('levelData');
let html = '';
const end = Math.min(currentStart + pageSize - 1, 600);
for (let i = currentStart; i <= end; i++) {
html += generateLevelRow(i);
}
tableBody.innerHTML = html;
updatePageIndicator();
}
// 更新分页指示器
function updatePageIndicator() {
const end = Math.min(currentStart + pageSize - 1, 600);
document.getElementById('currentPage').textContent =
`${currentStart}-${end}/600`;
}
// 分页控制
function handlePageAction(action) {
const actions = {
'prev100': -100, 'prev10': -10, 'prev1': -1,
'next1': 1, 'next10': 10, 'next100': 100
};
if (actions[action]) {
currentStart += actions[action];
currentStart = Math.max(1, Math.min(currentStart, 600 - pageSize + 1));
renderTable();
window.scrollTo(0, 0);
}
}
// 搜索处理
function handleSearch() {
const input = document.getElementById('levelSearch');
const level = parseInt(input.value);
if (isNaN(level)) {
input.style.borderColor = '#dc3545';
setTimeout(() => input.style.borderColor = '', 1000);
return;
}
if (level < 1 || level > 600) {
alert('等级范围:1-600');
input.select();
return;
}
currentStart = Math.max(1, level - Math.floor(pageSize/2));
renderTable();
setTimeout(() => {
const row = document.querySelector(`tr[data-level="${level}"]`);
if (row) {
document.querySelectorAll('tr').forEach(el => {
el.style.backgroundColor = '';
});
row.style.backgroundColor = '#f1f5fe';
row.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, 50);
}
// 初始化
function init() {
// 事件委托处理按钮点击
document.addEventListener('click', function(e) {
const target = e.target;
// 搜索按钮
if (target.id === 'searchButton' || target.closest('#searchButton')) {
handleSearch();
return;
}
// 分页按钮
const action = target.getAttribute('data-page-action');
if (action) {
handlePageAction(action);
}
});
// 输入框回车事件
document.getElementById('levelSearch').addEventListener('keyup', function(e) {
if (e.key === 'Enter') handleSearch();
});
document.getElementById('level2').addEventListener('keyup', function(e) {
if (e.key === 'Enter') compareLevels();
});
// 初始渲染
renderTable();
}
// 启动应用
if (document.readyState !== 'loading') {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
</script>