Computer >> Computer tutorials >  >> Programming >> Javascript

JavaScript example for Capturing mouse positions after every given interval


To capture mouse positions after every given interval, the code is as follows. Following is the code for capturing mouse position −

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
   font-size: 18px;
   font-weight: 500;
   color: blueviolet;
}
</style>
</head>
<body>
<h1>Capture mouse position after every given interval</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to start capturing mouse position every 3 seconds</h3>
<script>
let resultEle = document.querySelector(".result");
let check;
let xCoord, yCoord;
document.body.addEventListener("mousemove", function (event) {
   xCoord = event.clientX;
   yCoord = event.clientY;
});
function displayCoordinate(element) {
   resultEle.innerHTML =
   "X coordinate = " + xCoord + "<br> Y coordinate = " + yCoord;
}
document.querySelector(".Btn").addEventListener("click", () => {
   setInterval(displayCoordinate, 3000);
});
</script>
</body>
</html>

Output

JavaScript example for Capturing mouse positions after every given interval

On clicking the “CLICK HERE” button the mouse position will be captured every 3 seconds −

JavaScript example for Capturing mouse positions after every given interval