js获取鼠标坐标并显示

在JavaScript中，获取鼠标坐标并显示可以通过监听鼠标移动事件（mousemove）来实现。以下是一个简单的示例代码，展示了如何获取鼠标的实时坐标并在页面上显示：

基础概念

事件监听：JavaScript允许你为特定事件（如鼠标移动）添加处理函数。
事件对象：当事件被触发时，浏览器会创建一个事件对象，其中包含有关该事件的详细信息，如鼠标位置。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Coordinates</title>
    <style>
        #coordinates {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.8);
            padding: 5px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="coordinates">Mouse Coordinates: (0, 0)</div>

    <script>
        document.addEventListener('mousemove', function(event) {
            const x = event.clientX;
            const y = event.clientY;
            document.getElementById('coordinates').textContent = `Mouse Coordinates: (${x}, ${y})`;
        });
    </script>
</body>
</html>