Question

我在鼠标位置闲置时试图创建一个div。现在，当它空闲时，它将在我的鼠标位置上创建一个新的div。当我闲置并保持上一个div时，如何使其在新的鼠标位置上创建一个新的div？非常感谢！

var idleTimer = null;
var idleState = false;
var idleWait = 2000;
var idleInterval = 1000;
var idleStartTime = Date.now();
var mouseX = 0;
var mouseY = 0;

(function($) {
  $(document).ready(function() {
    //Set a interval that checks the idle state
    setInterval(function() {
      if (idleState == true) {
        //add element if it doensn't excist, otherwise update it
        if ($('#idleDiv').length === 0) {
          var $el = $('<div>');
          $el.attr('id', 'idleDiv');
          $el.css('left', mouseX);
          $el.css('top', mouseY);

          $el.html('<p>You\'ve been idle for ' + ((Date.now() - idleStartTime) / 1000) + ' seconds.</p>');
          $("body").append($el);
        } else {
          $('#idleDiv').html('<p>You\'ve been idle for ' + ((Date.now() - idleStartTime) / 1000) + ' seconds.</p>');
        }
        //change the height when idle
        $('#idleDiv').height($('#idleDiv').height() + 10);
      }
    }, idleInterval);

    //sets the idleState to false on mousemove events and to true when no mouse move happended for 'idleWait' milliseconds.
    $(document).on('mousemove', function(event) {
      idleStartTime = Date.now();
      idleState = false;

      clearTimeout(idleTimer);

      idleTimer = setTimeout(function() {
        idleState = true
      }, idleWait);

      //Set the mouse coordinates
      mouseX = event.pageX;
      mouseY = event.pageY;
    });
  });
})(jQuery)

html,
body {
  padding: 0px;
  margin: 0px;
}

#idleDiv {
  background-color: gray;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

没有可行的示例，我只是在猜测。

我认为我先前的尝试可能创建了您想要的div，但是由于它们具有不同的id，因此它们丢失了CSS定位信息。另外，将$el添加到文档中之后修改了其中一行，因此这些更改可能无效。

我在下面进行了另一次尝试，将position: absolute添加到要添加的每个元素中。然后通过向每个新元素添加随机ID来修改新添加的元素，使其类似于原始代码。

var idleTimer = null;
var idleState = false;
var idleWait = 2000;
var idleInterval = 1000;
var idleStartTime = Date.now();
var mouseX = 0;
var mouseY = 0;

(function($) {
  $(document).ready(function() {
    //Set a interval that checks the idle state
    setInterval(function() {
      if (idleState == true) {
        //add element if it doensn't excist, otherwise update it
        var $el = $('<div>');
        var randomid = Math.random().toString(36).substring(7);
        $el.attr('id', randomid);
        $el.css('left', mouseX);
        $el.css('top', mouseY);
        $el.css('position', 'absolute');
        $el.css('background-color', 'grey');
        $el.html('<p>You\'ve been idle for ' + ((Date.now() - idleStartTime) / 1000) + ' seconds.</p>');
        $("body").append($el);
        //change the height when idle
        $('#'+randomid).height($('#'+randomid).height() + 10);
      }
    }, idleInterval);

    //sets the idleState to false on mousemove events and to true when no mouse move happended for 'idleWait' milliseconds.
    $(document).on('mousemove', function(event) {
      idleStartTime = Date.now();
      idleState = false;

      clearTimeout(idleTimer);

      idleTimer = setTimeout(function() {
        idleState = true
      }, idleWait);

      //Set the mouse coordinates
      mouseX = event.pageX;
      mouseY = event.pageY;
    });
  });
})(jQuery)

每次鼠标空闲时都创建一个新的div吗？

1 个答案: