event timeStamp jquery property

In the following example we use the timeStamp property. It indicates the time in which the event happens in milliseconds.

There is a square designed with css. We will calculate the time that the mouse pointer stays inside it.

event.timeStamp(). This event property calculates the difference in milliseconds between the time the event was created and January 1, 1970.
mouseenter(). When the mouse enters an element. Refers only to the element.
mouseleave(). When the mouse leaves an element. Refers only to the element.

<div id="square" style="width:200px;height:200px;border:1px solid black;"></div>
<div id="show"></div>
<!--Script jQuery-->
<script>
  var init;
  $("div#square").mouseenter(function (event) {
    init = event.timeStamp/1000;
  });
  $("div#square").mouseleave(function (event) {
    $('#show').html('Time within the square: '+(event.timeStamp/1000-init)+' seconds');
  });
</script>
<!--JQuery Library-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>