JavaScript для захвата положения мыши после каждого заданного интервала

Опубликовано: 14 Декабря, 2021

Язык JavaScript изначально создавался для веб-браузеров. С тех пор он развился и стал языком с множеством применений и платформ. Это позволяет нам взаимодействовать с браузером с помощью событий. События - это сигналы о том, что что-то произошло. Когда JavaScript используется на HTML-страницах, JavaScript может реагировать на эти события. Чтобы реагировать на события, мы можем назначить обработчик - функцию, которая запускается в случае события. Обработчики - это способ запуска кода JavaScript в случае действий пользователя.

В этой статье мы сосредоточимся на том, как фиксировать положение мыши на пустой HTML-странице за период времени 10 секунд в пределах заданного интервала времени. Изначально страница будет пустой. При первом щелчке запускается таймер на 10 секунд, а по окончании времени начала и X и Y-координаты положения мыши будут отображаться в форме объекта JavaScript.

Для этой задачи мы будем использовать следующие обработчики событий:

1. movemouse: когда курсор мыши перемещается.
2. DOMContentLoaded: когда HTML загружается и обрабатывается. DOM полностью построен.

Вот программа на JavaScript для того же:

 < html >
 
< head >
    < title >Timer Demo</ 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
 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);
 });
 </script>
 </ body >
 </ html > 

ПРИМЕЧАНИЕ. Мы должны продолжать перемещать курсор мыши при запуске таймера, иначе мы не сможем получить желаемое количество координат.
Мы узнаем о других обработчиках событий и связанных с ними проблемах в следующих статьях «Использование JavaScript для взаимодействия с браузером».

JavaScript JavaScript-Misc

JavaScript для захвата положения мыши после каждого заданного интервала

РЕКОМЕНДУЕМЫЕ СТАТЬИ