用于在每个给定间隔后捕获鼠标位置的 JavaScript

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

在本文中，我们将重点介绍如何在给定的时间间隔内以 10 秒的时间段捕获空 HTML 页面上的鼠标位置。该页面最初是空的。在第一次单击时，将启动一个 10 秒的计时器，并在结束开始时间时，鼠标位置的 X 和 Y 坐标将以 JavaScript 对象的形式显示。

我们将用于此任务的事件处理程序将是：

1. movemouse：当鼠标光标移动时。
2. DOMContentLoaded：当 HTML 被加载和处理时。 DOM 已完全构建。

这是相同的 JavaScript 程序：

  

    Timer Demo

  

  

    Timer will appear here!

  

  

  
// timer
var limit = 10000; 
  
// time interval of 500 millisecond set
var throttle = 500;     
  
//timer is off initially
var timerON = false;                 
var start ;
var last ;
var 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();
    var time = 10;
      
    // timer has started
    timerON = true;                 
    document.removeEventListener('click', clickEnvoke);
    document.addEventListener('mousemove', mouseUpdate);
    var 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) {
  var 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 () {
    var loadTime = (new Date).getTime();
    document.addEventListener('click', clickEnvoke);
});


                    

注意：一旦计时器开始，我们必须继续移动鼠标光标，否则我们可能无法获得所需的坐标数。
我们将在接下来的“使用 JavaScript 与浏览器交互”的文章中了解更多事件处理程序和相关问题。