一、思路
- 设置一个盒子
- 获取这个盒子的坐标offset
- 鼠标在这个页面的坐标pageX
- 这两个坐标相减
- 把坐标赋值给innerHTML
二、代码
1.代码
代码如下(示例):
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var div=document.querySelector('.box');
div.addEventListener('mousemove',function(e){
//console.log(e.pageX);
var x=e.pageX-this.offsetLeft;
var y=e.pageY-this.offsetTop;
div.innerHTML='x轴:'+x+' y轴是:'+y;
})
</script>
2.运行结果
总结
多学习,多敲代码