如何在没有jquery的游标位置创建一个新的div元素

Question

如何制作一个JavaScript函数，在运行时，在游标位置创建一个新的<div>元素，其中包含类11和id 12;然后在2秒后删除它？

我不想使用任何外部脚本。我只是希望它是原始的JavaScript。

Answer 1

首先，您将不得不使用鼠标事件。鼠标事件包含诸如clientX，clientY，pageX，pageY，offsetX，offsetY，screenX，screenY等属性。查看差异。这些是只读属性，并根据它们的属性显示坐标。

所以基本上你可以创建一个元素，使位置绝对，并使用鼠标事件属性（如pageX和pageY）设置顶部和左侧属性。

添加功能

document.body.setAttribute('onclick', 'myFunction(event)');

然后创建元素

function myFunction(ev){
  var div = document.createElement('div');
  div.id = '12';
  div.className = '11';

  div.style.position = 'absolute';
  div.style.height = '100px';
  div.style.width = '100px';
  div.style.backgroundColor = 'cornflowerblue';
  div.style.top = ev.pageY;
  div.style.left = ev.pageX;

  var body = document.getElementsByTagName('body');
  body[0].appendChild(div);

  //you can easily destroy in 2 seconds using set timeout
  setTimeout(function(){
    body[0].removeChild(div);
  }, 2000)
}

试试吧。此代码将在您单击鼠标的位置创建一个div元素。