JavaScript example for Capturing mouse positions after every given interval

JavascriptFront End TechnologyObject Oriented Programming

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

Example

 Live Demo

<!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

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

raja
Published on 06-May-2020 12:15:27
Advertisements