SOURCE

window.onload = function() {
  document.querySelector('.box').addEventListener('click', function(event) {
		this.innerHTML = `px = ${event.pageX}, py = ${event.pageY},ox = ${event.x}`
  }, false)
  let m = document.querySelector('#move')
  let n = 0.5
  setInterval(() => {
    let x = m.offsetLeft
    let y = m.offsetTop
    let random = Math.floor(Math.random() * 4)
    let left = x + 3*n + 5
    let top = y + n
    console.log(x, y)
    insert(left, top)
   	m.style.left =  left + 'px'
    m.style.top =  top + 'px'
  }, 1000)
}
function insert(left, top) {
  let newDiv = document.createElement('div')
  newDiv.style.width = '2px'
  newDiv.style.height = '2px'
  newDiv.style.left = left + 'px'
  newDiv.style.top = top + 'px'
  newDiv.style.background = '#000'
  newDiv.style.position = 'absolute'
  document.documentElement.appendChild(newDiv)
}

<div id="app">
  <div class="box"></div>
</div>
<div id="move"></div>

* {
  margin: 0;
  padding: 0;
  
}
#app {
  width: 400px;
  line-height: 45px;
  padding-left: 20px;
  height: 400px;
  z-index: 9;
  color: #fff;
  margin: 40px;
  position:relative;
}
#app:hover {
  background: #ccc
}
.box {
  width: 200px;
  height: 200px;
  z-index: 99;
  margin:-50px;
  position: absolute;
}
#move {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  position: absolute;
  z-index: 999;
  top: 0px;
  left: 0px;
}