JavaScript 每隔一段给定的时间捕获鼠标位置

JavaScript语言最初是为Web浏览器创建的。从那时起，它发展成为一个具有多种用途和平台的语言。它允许我们使用事件与浏览器进行交互。事件是表示某些事情发生的信号。当JavaScript在HTML页面中使用时，JavaScript可以对这些事件做出反应。为了对事件做出反应，我们可以分配一个处理程序 – 一个在事件发生时运行的函数。处理程序是一种处理用户操作的方式。

在本文中，我们将重点介绍如何在给定时间间隔内的10秒时间段内捕获空HTML页面上的鼠标位置。页面最初将是空白的。在第一次点击后，将启动10秒钟的计时器，并在计时结束时显示开始时间和鼠标位置的X和Y坐标，以JavaScript对象的形式显示。我们将用于此任务的事件处理程序将是：

movemouse： 当鼠标的光标移动时。
DOMContentLoaded： 当HTML加载和处理时。DOM完全构建。以下是相同任务的JavaScript程序。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        JavaScript for Capturing Mouse Positions
        After Every Given Interval
    </title>
</head>
 
<body>
    <div id="timer-section" style="text-align: center;">
        Timer will appear here!
    </div>
 
    <div id="output-section"></div>
 
    <script type="text/javascript">
 
        // Timer
        let limit = 10000;
 
        // Time interval of 500 millisecond set
        let throttle = 500;
 
        // Timer is off initially
        let timerON = false;
        let start;
        let last;
        let mousePositions = [];
 
        // Records the time when the timer starts
        function makeTime(s) {
            return s.getHours() + " : " + s.getMinutes()
                + " : " + s.getSeconds();
        }
 
        // When the first click to start the timer,
        // this function will get envoked
        function clickEnvoke() {
            start = (new Date).getTime();
            mousePositions.push({
                time: {
                    start: makeTime(new Date())
                }
            });
            console.log(mousePositions);
            last = (new Date).getTime();
            let time = 10;
 
            // Timer has started
            timerON = true;
            document.removeEventListener('click', clickEnvoke);
            document.addEventListener('mousemove', mouseUpdate);
            let timer = setInterval(function () {
                if (time >= 0)
                    document.getElementById('timer-section')
                        .innerHTML = time;
                else {
 
                    // Mouse positions will be stop recording
                    // as timer is 0
                    timerON = false;
                    clearInterval(timer);
                    document.removeEventListener('mousemove', mouseUpdate);
 
                    // JSON data need to converted into 
                    // string to print as object
                    document.getElementById('timer-section').innerHTML = "";
                    document.getElementById('timer-section').innerHTML +=
                        JSON.stringify(mousePositions);
                }
 
                time--;
            }, 1000);
        }
 
        // Capturing mouse positions envoked
        function mouseUpdate(event) {
            let now = (new Date).getTime();
            if (timerON) {
                if (now - start > limit) {
                    return document.removeEventListener(
                            'mousemove', mouseUpdate);
                }
 
                if (now - last < throttle) {
                    return;
                }
                last = now;
                mousePositions.push({
                    info: {
                        x: event.pageX,
                        y: event.pageY
                    }
                });
 
            }
            else
                console.log(mousePositions);
            // Do whatever you want to do within your
            // time limit here
        }
 
        // Initial HTML page is empty and DOM is loaded
        // upon first click our functions will work
        document.addEventListener('DOMContentLoaded', function () {
            let loadTime = (new Date).getTime();
            document.addEventListener('click', clickEnvoke);
        });
    </script>
</body>
</html>

输出：

JavaScript 每隔一段给定的时间捕获鼠标位置