光标位置的实时显示

效果图如下：

光标位置的实时显示

html结构代码：

X轴：<span>0</span>
<br>
Y轴：<span>0</span>

js逻辑代码：

// 获取两个span标签
var oSpans = document.querySelectorAll('span');
// 在文档中移动鼠标
document.addEventListener('mousemove',mousemove)
// 移动鼠标的过程中，获取到光标的位置，显示在两个span中
function mousemove(){
    // 获取事件对象 - 光标位置的获取需要依赖事件对象
    var e = window.event;
    // 获取光标在文档中的位置
    var x = e.pageX;
    var y = e.pageY;
    // 将x和y放在页面的两个span中
    oSpans[0].innerText = x;
    oSpans[1].innerText = y;
}