Java Script Calculating and Displaying Idle Time

Question

I'm trying to write with javascript and html how to display the time a user is idle (not moving mouse or pressing keys). While the program can detect mousemovements and key presses, the program for some reason isn't calling the idleTime() method which displays the time in minutes and seconds.

I'm wondering why the method isn't getting called, as if it is called it would display true or false if a button is pressed.

var startIdle = new Date().getTime();
var mouseMoved = false;
var buttonPressed = false;

function idleTime() {
  document.write(buttonPressed);
  if (mouseMoved || buttonPressed) {
  startIdle = new Date().getTime();
  }
  document.getElementById('idle').innerHTML =   calculateMin(startIdle) + " minutes: " + calculateSec(startIdle)   + " seconds";
  var t = setTimeout(function() {
  idleTime()
  }, 500);
}

function calculateSec(startIdle1) {
  var currentIdle = new Date().getTime();
  var timeDiff = Math.abs(currentIdle - startIdle1);
  var idleSec = Math.ceil(timeDiff / (1000));
  return idleSec % 60;
}

function calculateMin(startIdle1) {
  var currentIdle = new Date().getTime();
  var timeDiff = Math.abs(currentIdle - startIdle1);
  var idleMin = Math.ceil(timeDiff / (1000 * 60));
  return idleMin;
}

var timer;

// mousemove code
var stoppedElement = document.getElementById("stopped");

function mouseStopped() { // the actual function that is called
   mouseMoved = false;
   stoppedElement.innerHTML = "Mouse stopped";
}

window.addEventListener("mousemove", function() {
   mouseMoved = true;
   stoppedElement.innerHTML = "Mouse moving";
   clearTimeout(timer);
   timer = setTimeout(mouseStopped, 300);
});

//keypress code
var keysElement = document.getElementById('keyPressed');

window.addEventListener("keyup", function() {
   buttonPressed = false;
   keysElement.innerHTML = "Keys not Pressed";
   clearTimeout(timer);
   timer = setTimeout("keysPressed", 300);
});

window.addEventListener("keydown", function() {
   buttonPressed = true;
   keysElement.innerHTML = "Keys Pressed";
   clearTimeout(timer);
   timer = setTimeout("keyPressed", 300);

});

function checkTime(i) {
   if (i < 10) {
      i = "0" + i
   }; // add zero in front of numbers < 10
   return i;
}

Here is the HTML code:

<body onload="idleTime()">


    <div id="stopped"><br>Mouse stopped</br></div>
    <div id="keyPressed"> Keys not Pressed</div>

    <strong>
      <div id="header"><br>Time Idle:</br>
      </div>
    <div id="idle"></div>


    </strong>
  </body>

document.write probably doesn't do what you expect it to do, so just avoid using it altogether. — Kevin Ji
– Kevin Ji, Commented Aug 13, 2015 at 23:50

Joy Biswas · Accepted Answer · 2015-08-14 18:00:24Z

1

Actually the keysElement and stoppedElement were not referred firing before the DOM load. and also removed the document.write

Thats all all good. :)

var startIdle = new Date().getTime();
var mouseMoved = false;
var buttonPressed = false;

function idleTime() {
  //document.write(buttonPressed);
  if (mouseMoved || buttonPressed) {
  startIdle = new Date().getTime();
  }
  document.getElementById('idle').innerHTML =   calculateMin(startIdle) + " minutes: " + calculateSec(startIdle)   + " seconds";
  var t = setTimeout(function() {
  idleTime()
  }, 500);
}

function calculateSec(startIdle1) {
  var currentIdle = new Date().getTime();
  var timeDiff = Math.abs(currentIdle - startIdle1);
  var idleSec = Math.ceil(timeDiff / (1000));
  return idleSec % 60;
}

function calculateMin(startIdle1) {
  var currentIdle = new Date().getTime();
  var timeDiff = Math.abs(currentIdle - startIdle1);
  var idleMin = Math.ceil(timeDiff / (1000 * 60));
  return idleMin;
}

var timer;

// mousemove code
//var stoppedElement = document.getElementById("stopped");

function mouseStopped() { // the actual function that is called
   mouseMoved = false;
   document.getElementById("stopped").innerHTML = "Mouse stopped";
}

function keyStopped() { // the actual function that is called
   buttonPressed = false;
   document.getElementById("keyPressed").innerHTML = "Keys stopped";
}

window.addEventListener("mousemove", function() {
   mouseMoved = true;
   document.getElementById("stopped").innerHTML = "Mouse moving";
   clearTimeout(timer);
   timer = setTimeout(mouseStopped, 500);
});


window.addEventListener("keyup", function() {
   buttonPressed = true;
   document.getElementById('keyPressed').innerHTML = "Keys Pressed";
   clearTimeout(timer);
   timer = setTimeout(keyStopped, 500);
});

window.addEventListener("keydown", function() {
   buttonPressed = true;
   document.getElementById('keyPressed').innerHTML = "Keys Pressed";
   clearTimeout(timer);
   timer = setTimeout(keyStopped, 500);

});

function checkTime(i) {
   if (i < 10) {
      i = "0" + i
   }; // add zero in front of numbers < 10
   return i;
}

window.onload = idleTime;

<div id="stopped"><br>Mouse stopped</br></div>
<div id="keyPressed"> Keys not Pressed</div>
<strong>
  <div id="header"><br>Time Idle:</br></div>
  <div id="idle"></div>
</strong>

edited Aug 14, 2015 at 18:00

answered Aug 13, 2015 at 23:58

Joy Biswas

6,5371 gold badge26 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Joy Biswas Over a year ago

Did you get what you were looking for. Actually try wrapping up all your functions in one block/fn and then execute it on body load. that will make sure you have all what you wanted to

Y. Lou Over a year ago

Thank you so much this did help. However, i'm not sure why whenever i push down a key or move the mouse, the timer is reset to 1 min 0 sec. overall thanks for the help

Joy Biswas Over a year ago

Accept n up vote please. If u think it did work for u

Y. Lou Over a year ago

i up voted but i am new so it hides my upvote. I still cannot figure out tho why the timer is reset to 1 min tho

Joy Biswas Over a year ago

on key press you mean ??

|

Collectives™ on Stack Overflow

Java Script Calculating and Displaying Idle Time

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related