css部分
div {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
display: none;
}
html部分
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
js部分
function chargeColor() {
return Math.floor(Math.random() * 256);
}
console.log(typeof chargeColor());
var div = document.getElementsByTagName("div")
document.onmousemove = function (event) {
var event = event || window.event
var i = 0
var time = setInterval(function () {
if (i < 10) {
div[i].style.display = "block"
div[i].style.backgroundColor = `rgb(${chargeColor()}, ${chargeColor()}, ${chargeColor()})`
div[i].style.left = event.clientX - div[i].clientWidth / 2 + "px"
div[i].style.top = event.clientY - div[i].clientHeight / 2 + "px"
i++
} else {
clearInterval(time)
}
}, 100)
}