JavaScript动态显示鼠标移动轨迹

效果图：

思路：

当鼠标在页面上移动时，动态创建一个小圆点(位置就是鼠标的当前位置)。一秒后，再把该圆点删除掉。仅需要js代码就能实现

代码：

<script>
        //鼠标移动时，动态创建div,一秒后删除
        window.onmousemove = function(event){
            var nDiv = document.createElement('div')  //创建新的div
            var e = event || window.event   //获取事件对象
            //设置div的样式(红色小圆点)和位置(鼠标当前位置)
            nDiv.style.cssText = "position:absolute; width:5px; height:5px; background-color:red; border-radius:50%"   
            nDiv.style.left = e.pageX + "px"
            nDiv.style.top = e.pageY + "px"
            //把创建好的div添加到body里面
            document.body.appendChild(nDiv)

            //延迟定时器实现一秒后删除效果
            setTimeout(function(){
                nDiv.remove();
            },1000)
        }
    </script>

如有疑问，欢迎下方留言！