代码：

<!DOCTYPE html>

<html>

<head>

    <title>计算屏幕坐标</title>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">

        body {

            margin: 0;

            padding: 0;

        }

        #msg {

            background-color: #eeeeee;

            height: 200px;

        }

    </style>

</head>

<body>

    <div id="msg"></div>

    <script type="text/javascript">

        let div = document.querySelector('#msg');

        let msg = '';

        let firstPoint = getPoint(0, 0);

        window.onresize = function (e) {

            setTimeout(() => {

                firstPoint = getPoint(0, 0);

                showPoint();

            }, 100);

        }

        window.onmousemove = function (e) {

            setTimeout(() => {

                showPoint(e);

            }, 100);

        }

        function showPoint(e) {

            msg = '';

            let point;

            if (e) {

                point = getPoint(e.clientX, e.clientY);

            } else {

                point = getPoint(0, 0);

            }

            msg += '===========================================================================================<br />';

            msg += '页面左上角屏幕坐标：' + firstPoint.x + ', ' + firstPoint.y + '<br />';

            if (e) {

                msg += '事件屏幕坐标：' + e.screenX + ', ' + e.screenY + '<br />';

                msg += '计算屏幕坐标：' + point.x + ', ' + point.y + '<br />';

                if (e.screenX == point.x && e.screenY == point.y) {

                    msg += '相等<br />';

                } else {

                    msg += '不相等<br />';

                }

            }

            div.innerHTML = msg;

        }

        //计算屏幕坐标

        function getPoint(clientX, clientY) {

            let left = 0;

            let top = 0;

            if (window.outerWidth + 16 == window.innerWidth && window.outerHeight + 16 == window.innerHeight) { //最大化全屏

                msg += '最大化全屏状态<br />';

                top = (window.outerHeight - window.innerHeight + 8) + window.screenTop + clientY;

                left = (window.outerWidth - window.innerWidth + 8) + window.screenLeft + clientX;

            } else if (window.outerWidth == window.innerWidth && window.outerHeight == window.innerHeight) { //全屏

                msg += '全屏状态<br />';

                top = (window.outerHeight - window.innerHeight) + window.screenTop + clientY;

                left = (window.outerWidth - window.innerWidth) + window.screenLeft + clientX;

            }

            else {

                if (window.outerWidth == screen.availWidth && window.outerHeight == screen.availHeight) { //最大化

                    msg += '最大化状态<br />';

                    top = (window.outerHeight - window.innerHeight) + window.screenTop + clientY;

                    left = (window.outerWidth - window.innerWidth) + window.screenLeft + clientX;

                } else {

                    msg += '非最大化非全屏状态<br />';

                    top = (window.outerHeight - window.innerHeight - 8) + window.screenTop + clientY;

                    left = (window.outerWidth - window.innerWidth - 8) + window.screenLeft + clientX;

                }

            }

            return { x: left, y: top };

        }

    </script>

</body>

</html>

说明：适用于谷歌浏览器，360浏览器下有BUG，因为360浏览器有状态栏。

思考：获取电脑屏幕坐标的意义是什么？

js将页面上取得的元素坐标转换为电脑屏幕坐标的更多相关文章

  1. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  2. 使用js在页面上新建文件夹

    使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

    JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...

  4. 如何使用 js 检测页面上全局变量

    如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...

  5. js禁用页面上右键菜单、选中和复制

    有时候我们不想页面上的内容被人复制走,那么就可以使用js对页面进行设置,禁止右键菜单.禁止选中.禁止复制等功能可以有效的达到这个效果,js代码如下所示: /** * 禁用右键菜单 */ documen ...

  6. 如何用JS获取页面上的所有标签

    最近忙的一匹,忙着大保健,都来不及写博客,今天特意抽出点时间来写一写 前两天看到一个题,是问如何从页面上获取所有的标签的并查看他们的数量,感觉还是有点意思的,所以给大家来搞一下子 我们先来捋捋思路,那 ...

  7. js检查页面上有无重复id的代码分享

    用js代码检查一个页面上是否用重复的id. 方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...

  8. JS 将页面上的表格导出为 Excel 文件

    如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 E ...

  9. append、appendTo、prepend、prependTo、before、insertBefore、after、insertAfter、replaceAll方法被调用后，原本在页面上显示的元素会消失

    详细描述: $ele.append..appendTo..prepend..prependTo..before..insertBefore..after..insertAfter..replaceAl ...

  10. js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

    应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...

随机推荐

  1. Grok AI 是什么？

    原文链接:https://openaigptguide.com/grok-ai/ Grok AI是由马斯克推出的一款高级别的人工智能大语言模型,旨在帮助软件开发者以不同的口头语言交流和表达.它是基于多 ...

  2. Windows_Cmd常用操作配置

    目录 特定功能执行命令 显示系统当前版本 电源管理 历史命令相关 显示路由表 显示本地 ARP 缓存 测试主机 联通性 查看网卡信息 修改DOS窗口中的编码格式 诊断域名系统 (DNS) 基础结构的信 ...

  3. .NET8极致性能优化Non-GC Heap

    前言 .NET8里面JIT引入了一个新的机制,叫做Non-GC Heap.JIT可以确保相关对象分配在Non-GC Heap上,该堆像其名称一样,不受GC管理.JIT需要保证这个对象没有被GC引用,并 ...

  4. Linux机器在命令行操作时开启/关闭代理

    命令行操作时,如果需要连接通过代理才能访问的地址,可以通过配置当前shell的配置文件来手动开启/关闭代理 注意:代理只对当前用户当前shell生效,切换用户或者重新连接需要重新开启代理 修改当前用户 ...

  5. MAUI Blazor 如何通过url使用本地文件

    前言 上一篇文章 MAUI Blazor 显示本地图片的新思路 中, 提出了通过webview拦截,从而在前端中显示本地图片的思路.不过当时还不完善,随后也发现了很多问题.比如, 不同平台上的url不 ...

  6. vue禁止浏览器F5进行刷新和监听浏览器刷新事件

    项目中有个这样的需求: 进入视频播放页后,添加一个标识,为了防止用户一次播放多个视频,当离开该页面后,如果是从当前正在播放的视频页面离开的,则离开播放页时清除标识,如果是不是则不清除,并且禁止用户按F ...

  7. Python 中的单下划线和双下划线

    哈喽大家好,我是咸鱼 当我们在学习 Python 的时候,可能会经常遇到单下划线 _ 和双下划线 __ 这两种命名方式 单下划线 _ 和双下划线 __ 不仅仅是只是一种简单的命名习惯,它们在 Pyth ...

  8. Linux RN6752 驱动编写

    一.概述 关于 RN6752V1 这个芯片这里就不做介绍了,看到这篇笔记的小伙伴应该都明白,虽然说 RN6752V1 芯片是 AHD 信号的解码芯片,但是也可以把芯片当做是一个 YUV 信号的 MIP ...

  9. 海上液化天然气 LNG 终端 | 图扑数字孪生

    关于 LNG 液化天然气 (Liquefied Natural Gas,简称 LNG) 在能源转型过程中被广泛认可为相对较清洁的能源选择. 相对于传统的煤炭和石油燃料,LNG 的燃烧过程产生的二氧化碳 ...

  10. GZY.Quartz.MUI(基于Quartz的UI可视化操作组件) 2.6.0发布 兼容.Net8.0

    前言 为了迎接.Net8.0 2.6.0终于发布了~ 更新内容: 兼容.NET8.0 新增界面按分组名称排序功能 优化本地持久化时文件路径异常的问题 优化数据库持久化时偶现的异常问题 新增简易授权,增 ...