JavaScript移动显示

1.首先创建好 html 的格式，然后！+Tab；我们要实现鼠标在div标签中移动时，下面的p标签实时显示鼠标在div的位置，首先要在body里创建div标签和p标签，分别给它们设置id名，如下图：

 

2.设置css样式；给前面创建的div标签和p标签设置样式，首先要把浏览器自带的内外边框样式删除掉，使用“*”通配符进行删除，分别给div标签和p标签设置好宽高背景颜色，用外边距（margin）把div标签和p标签移动到中间位置，如下图：

        

 

3.设置js样式，绑定鼠标移动事件；声明变量名（var oDiv），接着用id选择器获取到div标签的id名，然后再用刚才声明的变量名（oDiv）用onmousemove鼠标位移事件来实现鼠标移动，如下图：

 

4.设置浏览器兼容性；用event = event||window.event；来实现浏览器兼容性问题，然后调用到鼠标移动事件的方法里面，如下图：

 

5.设置鼠标在浏览器网页窗口的坐标；声明变量名x用来获取水平坐标，用刚刚设置的属性名（event）和网页窗口位置的X轴坐标（clientX）减去左侧的水平偏移距离（oDiv.offsetLeft）；

声明变量名y用来获取垂直坐标，用刚刚设置的属性名（event）和网页窗口位置的y轴坐标（clientY）减去上面的垂直偏移距离（oDiv.offsetTop）,如下图：

 

6.最后用id选择器获取到p标签的id名，接着用innerHTML来实时显示出鼠标在div里边移动的位置坐标（innerHTML=`X=${x}，Y=${y}`；），如下图：

 

7.效果图：

 

以上。