本文提供一段JavaScript代码,用于实时获取并显示鼠标在页面中的坐标位置。通过监听onmousemove事件,无需额外系统资源即可在指定区域动态展示鼠标像素点坐标,适用于前端交互开发测试。
JS实时获取鼠标坐标示例
这是一个展示如何通过JavaScript获取鼠标坐标及像素位置的典型示例。在页面运行后,只需随意移动鼠标,即可实时显示当前鼠标的坐标点,且该过程不会占用额外的系统资源。
HTML结构代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript获取鼠标坐标</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> .tip { width:200px; border:2px solid #ddd; padding:8px; background:#f1f1f1; color:#666; } </style> </head> <body> <div id="mjs" class="tip">源码爱好者</div> <div id="test" style="width:1000px;height:1000px;background:#ccc;" onmousemove="test(event)"></div> </body> </html> 代码运行注意事项
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]