JS网页如何状态栏显示坐标？-网页设计-锦华智联科技

浏览器窗口底部的原生状态栏：这个区域在大多数现代浏览器（如 Chrome, Firefox, Edge）中默认是隐藏的，且网页开发者无法直接向其中写入内容。我们不推荐这种方法，因为它不可靠且用户体验差。
网页自定义的状态栏：在网页内部创建一个类似状态栏的条，固定在页面底部，用来显示信息，这是最常用、最推荐的方法。

下面我将重点讲解第二种方法,并提供完整的代码示例。

（图片来源网络，侵删）

推荐方法：在网页内部创建自定义状态栏

这种方法的核心思路是：

在 HTML 中创建一个 <div> 元素作为我们的“状态栏”。
使用 CSS 将这个 div 固定在页面底部，并设置样式，看起来像一个状态栏。
使用 JavaScript 监听整个页面的 mousemove 事件。
当鼠标移动时,获取鼠标的 clientX 和 clientY 坐标。
将获取到的坐标更新到状态栏 div 的内容中。

完整代码示例

你可以直接将下面的代码保存为一个 .html 文件（coordinates.html），然后用浏览器打开它，就能看到效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">鼠标坐标显示</title>
    <style>
        /* 1. 基本页面样式，让内容区有高度，方便测试 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            height: 2000px; /* 给页面一个足够的高度，可以滚动 */
            background-color: #f0f2f5;
        }
        h1 {
            color: #333;
        }
        p {
            line-height: 1.6;
        }
        /* 2. 自定义状态栏样式 */
        #status-bar {
            position: fixed; /* 固定定位 */
            bottom: 0;       /* 位于底部 */
            left: 0;        /* 从左开始 */
            width: 100%;    /* 宽度占满整个屏幕 */
            background-color: #333;
            color: #fff;
            padding: 8px 15px;
            font-size: 14px;
            font-family: 'Courier New', Courier, monospace; /* 使用等宽字体，数字对齐更好看 */
            box-sizing: border-box; /* 确保 padding 不会影响宽度 */
            z-index: 1000; /* 确保它在最上层，不会被其他内容遮挡 */
        }
        /* 3. 可选：给坐标信息加个样式，比如高亮显示 */
        #coordinates {
            color: #4CAF50; /* 绿色高亮 */
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>页面内容区域</h1>
    <p>请在此页面移动鼠标，观察页面底部状态栏中坐标的变化。</p>
    <p>这个状态栏是我们自己用 HTML 和 CSS 创建的，可以完全控制其外观和行为。</p>
    <!-- 更多内容... -->
    <!-- 4. 状态栏的 HTML 元素 -->
    <div id="status-bar">
        状态栏: X=<span id="coordinates">0</span>, Y=<span id="coordinates">0</span>
    </div>
    <script>
        // 5. 获取状态栏和坐标显示的 DOM 元素
        const statusBar = document.getElementById('status-bar');
        const xCoord = document.getElementById('coordinates');
        const yCoord = document.getElementById('coordinates');
        // 注意：上面的选择器有问题，因为两个span的id相同。
        // 修正一下HTML和JS，使其更清晰准确。
        // 我们给两个span分别设置不同的id。
    </script>
</body>
</html>

代码修正版 (更清晰的实现)

上面的HTML中给两个<span>设置了相同的id，这在JavaScript中会获取到第一个元素，为了更精确，我们给它们不同的id。

（图片来源网络，侵删）

这是修正后的完整代码,推荐使用这个版本。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">鼠标坐标显示 (优化版)</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 20px;
            height: 2000px;
            background-color: #f4f4f9;
        }
        h1, p {
            color: #333;
        }
        /* 自定义状态栏样式 */
        #status-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 10px 20px;
            font-size: 14px;
            font-family: 'Consolas', 'Monaco', monospace;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
        }
    </style>
</head>
<body>
    <h1>页面内容区域</h1>
    <p>请在此页面移动鼠标，观察页面底部状态栏中坐标的变化。</p>
    <!-- 状态栏的 HTML 元素，给X和Y坐标分别设置id -->
    <div id="status-bar">
        坐标: X=<span id="x-coord">0</span>, Y=<span id="y-coord">0</span>
    </div>
    <script>
        // 1. 获取坐标显示的DOM元素
        const xCoordElement = document.getElementById('x-coord');
        const yCoordElement = document.getElementById('y-coord');
        // 2. 监听整个文档的鼠标移动事件
        document.addEventListener('mousemove', function(event) {
            // 3. 从事件对象中获取鼠标的X和Y坐标
            // clientX 和 clientY 是相对于浏览器视口 的坐标
            const x = event.clientX;
            const y = event.clientY;
            // 4. 更新状态栏中span元素的内容
            xCoordElement.textContent = x;
            yCoordElement.textContent = y;
        });
    </script>
</body>
</html>

代码详解

HTML 部分

<div id="status-bar">: 我们创建了一个 div 作为状态栏的容器，并给它一个唯一的 id，方便 JavaScript 找到它。
<span id="x-coord"> 和 <span id="y-coord">: 在状态栏内部，我们用两个 span 标签来分别显示 X 坐标和 Y 坐标，给它们不同的 id 是为了在 JavaScript 中能精确地更新每一个值。

CSS 部分

position: fixed;: 这是实现“固定在底部”的关键，它会使元素相对于浏览器视口进行定位，即使页面滚动，它也会保持在原地。
bottom: 0; 和 left: 0;: 将固定定位的元素放置在视口的左下角。
width: 100%;: 让状态栏的宽度和浏览器窗口一样宽。
z-index: 1000;: 设置一个较高的层级，确保状态栏不会被页面上的其他内容（如图片、文本等）遮挡。
background-color, color, font-family: 这些是基本的样式美化，让状态栏看起来更像一个真正的状态栏。

JavaScript 部分

document.getElementById(...): 在页面加载完成后，通过元素的 id 获取到 x-coord 和 y-coord 这两个 span 元素，并将它们存储在变量中。
document.addEventListener('mousemove', ...): 这是我们监听鼠标事件的核心。mousemove 事件会在鼠标在页面上移动时持续触发。
function(event): 每次触发 mousemove 事件时，浏览器都会传递一个 event 对象给我们，这个对象包含了与事件相关的所有信息。
event.clientX 和 event.clientY: event 对象中的这两个属性就代表了鼠标当前在浏览器视口中的 X 坐标和 Y 坐标。
xCoordElement.textContent = x;: 获取到坐标值后，我们通过修改 span 元素的 textContent 属性，将新的坐标值显示在页面上。

其他可选的坐标

除了 clientX 和 clientY，event 对象还提供了一些其他有用的坐标，你可以根据需要替换：

pageX 和 pageY: 相对于整个文档（包括滚动区域）的坐标，如果你的页面很长，并且滚动条滚动到了中间，pageX 和 pageY 的值会远大于 clientX 和 clientY。
screenX 和 screenY: 相对于用户整个电脑屏幕的坐标，这个通常用于窗口定位等场景。

如果你想使用 pageX 和 pageY，只需修改 JavaScript 部分即可：

document.addEventListener('mousemove', function(event) {
    const x = event.pageX; // 使用 pageX
    const y = event.pageY; // 使用 pageY
    xCoordElement.textContent = x;
    yCoordElement.textContent = y;
});

要实现网页状态栏显示坐标,最佳实践是：

（图片来源网络，侵删）

放弃修改浏览器原生状态栏的想法。
创建一个固定在页面底部的 <div> 作为自定义状态栏。
监听 document 的 mousemove 事件。
获取 event.clientX 和 event.clientY 的值。
更新自定义状态栏 div 内部的内容。