QQ空间等级数据表

Article

无聊。手搓了一款可以查询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>

现在已有 59 次阅读，3 条评论，5 人点赞

日	一	二	三	四	五	六
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31