Skip to content

Instantly share code, notes, and snippets.

@jrjames83

jrjames83/time_between_mousemoves.html

Created February 28, 2017 04:37
Show Gist options
  • Save jrjames83/2fef5b85d7e0bf44855320ace7e49497 to your computer and use it in GitHub Desktop.
Save jrjames83/2fef5b85d7e0bf44855320ace7e49497 to your computer and use it in GitHub Desktop.
Download ZIP
getting time between mouse movements with javascript
Raw
time_between_mousemoves.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Draggable elements</title>
</script>
</head>
<body>
<h1>The Timer App!</h1>
<h2>Features and Benefits</h2>
<li>See time spent on page</li>
<li>See time spent off page</li>
<button id="33">Find out time spent!</button>
<h3>Time Array: </h3>
<p id="results"></p>
</body>
<script type="text/javascript">
var min_time = 0;
var max_time = 0;
var time_arr = [];
document.onmousemove = function (move) {
console.log(move.screenX, move.screenY)
console.log(new Date().getTime())
max_time = new Date().getTime();
time_arr.push(parseInt(max_time))
};
// use the button to debug data management
document.getElementById('33').addEventListener("click", function() {
alert("Clicked!");
console.log(time_arr);
// Get the max and min timestamps
var max_time_stamp = Math.max.apply(null, time_arr);
var min_time_stamp = Math.min.apply(null, time_arr);
console.log(max_time_stamp, " Is the max timestamp");
console.log(typeof max_time_stamp);
// Get the difference in inactivity
diffs = [];
for (var i = time_arr.length - 1; i >= 0; i--) {
// add the diffs to the array
diffs.push(time_arr[i+1] - time_arr[i]);
};
console.log(diffs, " is the array of timestamp differences");
document.getElementById("results").innerHTML = diffs.join("<br />");
time_arr = [];
/* SAMPLE OUTPUT WHERE I WAITED A WHILE
[NaN, 883, 66, 20, 112, 36, 8, 8, 8, 4, 12, 4, 8, 17, 8, 50, 101, 8, 6, 8, 4, 12, 8, 8, 4, 8, 8, 4, 8, 4, 8, 12, 8, 8, 8, 4, 8, 8, 5, 8, 16, 8, 4, 12, 4, 8, 8, 16, 4, 8, 8, 8, 8, 8, 8, 4, 4, 24, 8, 8, 8, 8, 4, 12, 4, 4, 28, 4, 8, 4, 12, 4, 8, 4, 8, 4, 44, 0, 8, 4, 10855, 8, 4, 12, 4, 16, 8, 8, 8, 4, 12, 4, 8, 8, 8, 0, 20, 8, 8, 8…] " is the array of timestamp differences"
*/
// Page reload terminates - in the database:
// URL, load time, last time moused, gaps....
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment