<!DOCTYPE html>
<html>
<head>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.test-area {
width: 100%;
height: 300px;
background: #f0f0f0;
border: 2px solid #333;
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
user-select: none;
}
.results {
margin: 20px 0;
padding: 15px;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.start-btn {
background: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.start-btn:hover {
background: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Mouse Polling Rate Checker</h1>
<p>Move your mouse inside the test area to measure your mouse's polling rate.</p>
<button class="start-btn" onclick="startTest()">Start Test</button>
<div class="test-area" id="testArea">
Click Start Test and move your mouse here
</div>
<div class="results">
<h3>Results:</h3>
<p>Current Polling Rate: <span id="currentRate">0</span> Hz</p>
<p>Average Polling Rate: <span id="averageRate">0</span> Hz</p>
<p>Samples Collected: <span id="samples">0</span></p>
<p>Time Elapsed: <span id="timeElapsed">0</span> seconds</p>
</div>
</div>
<script>
let isTracking = false;
let startTime = 0;
let samples = 0;
let lastTime = 0;
let intervals = [];
let testArea = document.getElementById('testArea');
function startTest() {
// Reset values
isTracking = true;
samples = 0;
intervals = [];
startTime = performance.now();
lastTime = startTime;
// Update UI
document.getElementById('samples').textContent = '0';
document.getElementById('currentRate').textContent = '0';
document.getElementById('averageRate').textContent = '0';
document.getElementById('timeElapsed').textContent = '0';
testArea.textContent = 'Move your mouse here';
// Start update loop
requestAnimationFrame(updateStats);
}
testArea.addEventListener('mousemove', function(e) {
if (!isTracking) return;
const currentTime = performance.now();
const interval = currentTime - lastTime;
if (interval > 0) { // Avoid division by zero
intervals.push(interval);
samples++;
lastTime = currentTime;
// Keep only last 100 samples for current rate
if (intervals.length > 100) {
intervals.shift();
}
}
});
function updateStats() {
if (!isTracking) return;
const currentTime = performance.now();
const elapsedSeconds = (currentTime - startTime) / 1000;
// Calculate current polling rate (last 100 samples)
let currentRate = 0;
if (intervals.length > 0) {
const avgInterval = intervals.reduce((a, b) => a + b, 0) / intervals.length;
currentRate = Math.round(1000 / avgInterval);
}
// Calculate average polling rate
const averageRate = Math.round(samples / elapsedSeconds);
// Update display
document.getElementById('currentRate').textContent = currentRate;
document.getElementById('averageRate').textContent = averageRate;
document.getElementById('samples').textContent = samples;
document.getElementById('timeElapsed').textContent = elapsedSeconds.toFixed(1);
// Stop test after 10 seconds
if (elapsedSeconds >= 10) {
isTracking = false;
testArea.textContent = 'Test completed. Click Start Test to try again.';
return;
}
requestAnimationFrame(updateStats);
}
</script>
</body>
</html>