Question

我正在尝试用javascript和html编写如何显示用户空闲的时间（不移动鼠标或按键）。虽然程序可以检测到鼠标移动和按键，但程序由于某种原因没有调用idleTime（）方法，该方法以分钟和秒显示时间。

我想知道为什么没有调用该方法，就好像它被调用一样，如果按下按钮，它将显示true或false。

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;
}

以下是HTML代码：

<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>

Answer 1

实际上，在DOM加载之前没有引用keysElement和stoppedElement。并删除了document.write

这一切都很好。：）

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>

Java脚本计算和显示空闲时间

1 个答案: