大头钉的小小blog

测试鼠标滚轮是否正常/灵敏

作者: 大头钉
时间: 2024-12-30
分类: 默认分类
评论

使用html预览网站，输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标滚轮检测工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            padding: 2rem;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        h2 {
            color: #2c3e50;
            margin-bottom: 1.5rem;
            font-size: 2rem;
            text-align: center;
            position: relative;
        }

        h2:after {
            content: '';
            display: block;
            width: 50px;
            height: 3px;
            background: #3498db;
            margin: 10px auto;
        }

        #testArea {
            width: 100%;
            height: 300px;
            border-radius: 10px;
            background: white;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: auto;
            transition: all 0.3s ease;
        }

        #testArea:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        #testArea h3 {
            color: #2c3e50;
            margin-bottom: 1rem;
        }

        .controls {
            margin-bottom: 1rem;
            display: flex;
            gap: 10px;
        }

        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 0.9rem;
        }

        button:hover {
            background-color: #2980b9;
        }

        #log {
            height: 300px;
            background: white;
            border-radius: 10px;
            padding: 1rem;
            overflow-y: auto;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .log-entry {
            padding: 8px;
            margin: 5px 0;
            border-radius: 5px;
            font-family: monospace;
            font-size: 0.9rem;
            transition: all 0.2s ease;
        }

        .up {
            background-color: #e8f5e9;
            border-left: 4px solid #4caf50;
        }

        .down {
            background-color: #ffebee;
            border-left: 4px solid #f44336;
        }

        .warning {
            background-color: #fff3e0;
            border-left: 4px solid #ff9800;
        }

        .stats {
            display: flex;
            gap: 20px;
            margin-bottom: 1rem;
        }

        .stat-box {
            background: white;
            padding: 1rem;
            border-radius: 5px;
            flex: 1;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: #2c3e50;
        }

        .stat-label {
            font-size: 0.8rem;
            color: #7f8c8d;
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>鼠标滚轮检测工具</h2>

        <div class="stats">
            <div class="stat-box">
                <div class="stat-value" id="totalEvents">0</div>
                <div class="stat-label">总事件数</div>
            </div>
            <div class="stat-box">
                <div class="stat-value" id="directionChanges">0</div>
                <div class="stat-label">方向变化次数</div>
            </div>
            <div class="stat-box">
                <div class="stat-value" id="avgDeltaY">0</div>
                <div class="stat-label">平均 deltaY</div>
            </div>
        </div>

        <div id="testArea">
            <h3>在此区域内滚动鼠标滚轮</h3>
            <p>测试区域 - 滚动鼠标查看结果</p>
            <div style="height: 1000px;"></div>
        </div>

        <div class="controls">
            <button onclick="clearLog()">清除日志</button>
            <button onclick="exportLog()">导出日志</button>
        </div>

        <div id="log"></div>
    </div>

    <script>
        const logDiv = document.getElementById('log');
        const testArea = document.getElementById('testArea');
        let lastTime = Date.now();
        let lastDirection = null;
        let totalEvents = 0;
        let directionChanges = 0;
        let totalDeltaY = 0;

        function updateStats() {
            document.getElementById('totalEvents').textContent = totalEvents;
            document.getElementById('directionChanges').textContent = directionChanges;
            document.getElementById('avgDeltaY').textContent = 
                totalEvents > 0 ? Math.abs(Math.round(totalDeltaY / totalEvents)) : 0;
        }

        function addLog(event, direction) {
            totalEvents++;
            totalDeltaY += Math.abs(event.deltaY);
            
            const now = Date.now();
            const timeDiff = now - lastTime;
            const deltaY = event.deltaY;
            
            let message = `时间: ${new Date().toISOString().split('T')[1].split('.')[0]} | `;
            message += `方向: ${direction} | `;
            message += `deltaY: ${deltaY} | `;
            
            if (lastDirection !== null) {
                message += `间隔: ${timeDiff}ms | `;
                if (lastDirection !== direction) {
                    message += '⚠️ 方向改变!';
                    directionChanges++;
                }
            }

            const logEntry = document.createElement('div');
            logEntry.className = `log-entry ${direction === '向上' ? 'up' : 'down'}`;
            if (lastDirection !== null && lastDirection !== direction) {
                logEntry.classList.add('warning');
            }
            logEntry.textContent = message;
            logDiv.insertBefore(logEntry, logDiv.firstChild);

            lastTime = now;
            lastDirection = direction;
            updateStats();
        }

        function clearLog() {
            logDiv.innerHTML = '';
            lastDirection = null;
            totalEvents = 0;
            directionChanges = 0;
            totalDeltaY = 0;
            updateStats();
        }

        function exportLog() {
            const logs = Array.from(logDiv.children)
                .map(entry => entry.textContent)
                .reverse()
                .join('\n');
            
            const blob = new Blob([logs], { type: 'text/plain' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'mouse-wheel-log.txt';
            a.click();
            window.URL.revokeObjectURL(url);
        }

        testArea.addEventListener('wheel', function(event) {
            event.preventDefault();
            const direction = event.deltaY < 0 ? '向上' : '向下';
            addLog(event, direction);
        });
    </script>
</body>
</html>