Simple JavaScript program that tracks mouse movement and displays both local and global coordinates in the top left corner of the screen.
This HTML file contains a `<div>` element with the id `coordinates`, which will display the coordinates. The JavaScript code listens for the `mousemove` event on the document and updates the coordinates accordingly. It calculates both the local coordinates relative to the viewport (clientX and clientY) and the global coordinates relative to the entire document (pageX and pageY), then updates the content of the `coordinatesDiv` element with these values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Coordinates</title>
<style>
#coordinates {
position: fixed;
top: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="coordinates"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const coordinatesDiv = document.getElementById('coordinates');
function updateCoordinates(event) {
const localX = event.clientX;
const localY = event.clientY;
const globalX = event.pageX;
const globalY = event.pageY;
coordinatesDiv.innerText = `Local: (${localX}, ${localY}) Global: (${globalX}, ${globalY})`;
}
document.addEventListener('mousemove', updateCoordinates);
});
</script>
</body>
</html>
Things to Try
• Display the 'speed' of the mouse (as you move it around the screen store the past few positions and calculate an average - how many pixels between updates)
• Adding a 'div' with 'position:absolute' style - so it can be moved anywhere on screen - then add a border the div (draw a box around it and make it a bit bigger than then cursor) - then have it drawn around the mouse cursor (update it as the cursor moves around)
• In addition to the local and global mouse position - give the mouse button data (if any buttons are pressed)
|
