当前位置： 首页 > news >正文

js前端跨屏效果

news 2026/4/25 17:52:32

 效果:

三个球

源码: 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三个球</title>
</head>
<body><div id="alert1" style="white-space:pre-wrap;"></div><br /><div id="alert2" style="white-space:pre-wrap;"></div><canvas id="canvas1" style="position:absolute;left:0;top:0;"></canvas>      <script>const alert1 = document.getElementById('alert1');const alert2 = document.getElementById('alert2');const canvas1 = document.getElementById('canvas1');const ctx = canvas1.getContext('2d');const keys = getOtherKeys(); // 获取其它窗口的storage keysconst key = keys.length == 0 ? 1 : keys.at(-1) + 1; // 自增最大的key序号，定义自己窗口storage keyconst color = ['red', 'blue', 'green'][key % 3]; // 获取圆颜色// 窗口关闭时删除自己窗口storagewindow.onunload = function () {localStorage.removeItem(key);}function getOtherKeys() {const keys = [];for (let i = 0; i < localStorage.length; i++) {const k = Number(localStorage.key(i));!isNaN(k) && keys.push(k);}return keys.sort((a, b) => a - b);}function draw() {const { clientWidth, clientHeight } = document.body; // 获取body高宽const { screenX, screenY } = window; // 获取浏览器相对屏幕坐标const barHeight = window.outerHeight - window.innerHeight; // 获取浏览器body顶部地址栏高度// 记录logalert1.textContent = JSON.stringify({ key, clientWidth, clientHeight, screenX, screenY, barHeight }, '', 2);// 设置canvas为整个body高宽，铺满bodycanvas1.width = clientWidth;canvas1.height = clientHeight;// 获取自己的圆心坐标，为body中心const x = clientWidth / 2;const y = clientHeight / 2;// 画自己的圆ctx.fillStyle = color;ctx.beginPath();ctx.arc(x, y, 15, 0, Math.PI * 2);ctx.fill();// 记录自己的positionconst position = {top: y + barHeight + screenY,left: x + screenX,color: color,};// 获取其它窗口position，并遍历getOtherKeys().forEach(k => {const position2 = JSON.parse(localStorage.getItem(k)); // 获取其中一个窗口的圆心positionconst w = position2.left - position.left; // 获取相对自己圆心的横向间距const h = position2.top - position.top; // 获取相对自己圆心的纵向间距// 在自己的canvas上画出该圆ctx.fillStyle = position2.color;ctx.beginPath();ctx.arc(x + w, y + h, 15, 0, Math.PI * 2);ctx.fill();// 画连接线ctx.strokeStyle = "black";ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x + w, y + h);ctx.stroke();})// 更新自己窗口的positionlocalStorage.setItem(key, JSON.stringify(position));// 记录logalert2.textContent = JSON.stringify(localStorage, '', 2);window.requestAnimationFrame(draw);}window.requestAnimationFrame(draw);</script>
</body>
</html>

相关文章：

js前端跨屏效果

效果: 三个球 源码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>三个球</title> </h…...

编程日记 2023/11/25 1:51:15

配置华为云镜像加速器

登录华为云官网&#xff0c;点击控制台 在服务列表里面寻找swr服务 点击镜像中心&#xff0c;点击镜像加速器 {"registry-mirrors": [ "https://301dc05233c6419b810bdb22135af9eb.mirror.swr.myhuaweicloud.com" ]}配置镜像加速器 vim /etc/docker…...

编程日记 2023/11/25 1:50:14

Redis的四种模式：单机、主从、哨兵、集群

一、简单理解 单机模式&#xff1a;安装你的redis&#xff0c;启动服务即为单机模式。 主从模式&#xff1a;一个主节点搭配一个或多个从节点&#xff0c;无自动故障转移功能&#xff0c;主节点发生故障后&#xff0c;需要人工将其中一个从节点设置为主节点。 哨兵模式&…...

编程日记 2023/11/25 1:49:12

【开源】基于Vue.js的民宿预定管理系统

项目编号&#xff1a; S 058 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S058&#xff0c;文末获取源码。} 项目编号&#xff1a;S058&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用例设计2.2 功能设计2.2.1 租客角色…...

编程日记 2023/11/25 1:48:11

网络安全深入学习第九课——本机信息收集

文章目录 一、Windows基本信息收集1、查看当前权限2、查看指定用户的详细信息3、查看用户SID4、查看网卡配置5、查看服务器版本\补丁等6、查看系统架构7、查看安装的软件及版本8、查看本机服务信息9、查询进程信息和列表10、查看启动程序信息11、查看计划任务12、查看主机开机时…...

编程日记 2023/11/25 1:47:10

深入理解C语言指针基础概念：定义、内存地址与声明初始化

导言&#xff1a; 在C语言中&#xff0c;指针是一项强大而重要的概念&#xff0c;直接涉及内存的底层操作。理解指针的基础概念对于熟练运用C语言以及理解底层系统工作原理至关重要。本文将深入研究指针的定义、内存地址的概念以及指针的声明和初始化&#xff0c;帮助读者建立对…...

编程日记 2023/11/25 1:46:08

Django DRF版本号的处理

在restful规范中&#xff0c;后端的API中需要体现版本。如果项目比较大&#xff0c;需要些很多的视图类&#xff0c;在每一个类中都写一遍会比较麻烦&#xff0c;所以drf中也支持了全局配置。在每个版本处理的类中还定义了reverse方法&#xff0c;他是用来反向生成URL并携带相关…...

编程日记 2023/11/25 1:45:07

[工业自动化-25]：IDEC和泉RU2S-24D/RU4S-24D继电器的使用说明和接线方式

目录 一、外观 1.1 继电器整体&#xff1a; 1.2 继电器主体&#xff1a; 1.3 底座&#xff1a; 二、RU系列通用继电器介绍 2.1 总体 2.2 性能规格 2.3 锁存杆 2.4 信号定义与连线 - 2S系列 &#xff08;1&#xff09;24V输入 &#xff08;2&#xff09;第一路输出 …...

编程日记 2023/11/25 1:44:07

如何通过短视频提高转化率？

在当今信息爆炸的时代&#xff0c;如何让自己的品牌在众多的短视频中脱颖而出&#xff0c;吸引更多的潜在客户&#xff0c;是许多企业面临的问题。抖音和快手作为目前最受欢迎的短视频平台&#xff0c;为企业提供了无限的营销机会。在这篇文章中&#xff0c;我们将探讨如何通过…...

编程日记 2023/11/25 1:42:05

微软离Altman越近，离OpenAI就越远！

大数据产业创新服务媒体 ——聚焦数据 改变商业 在OpenAI这场连续剧中&#xff08;之所以说是连续剧&#xff0c;这个事情肯定没完&#xff0c;后面肯定还会出续集&#xff09;&#xff0c;让我倍感意外的是&#xff0c;Altman刚跟OpenAI分手&#xff0c;“离婚手续”都还没办…...

编程日记 2023/11/25 1:40:01

minio集群部署（k8s内）

一、前言 minio的部署有几种方式&#xff0c;分别是单节点单磁盘&#xff0c;单节点多磁盘&#xff0c;多节点多磁盘三种方式&#xff0c;本次部署使用多节点多磁盘的方式进行部署&#xff0c;minio集群多节点部署最低要求需要4个节点&#xff0c;集群扩容时也是要求扩容的节点…...

编程日记 2023/11/25 1:37:58

【C语言】函数（四）：函数递归与迭代，二者有什么区别

目录 前言递归定义递归的两个必要条件接受一个整型值&#xff08;无符号&#xff09;&#xff0c;按照顺序打印它的每一位使用函数不允许创建临时变量&#xff0c;求字符串“abcd”的长度求n的阶乘求第n个斐波那契数 迭代总结递归与迭代的主要区别用法不同结构不同时间开销不同…...

编程日记 2023/11/25 1:36:57

[原创](免改BIOS)使用Clover升级旧电脑-(高阶玩法)让固态硬盘内置Win11 PE启动系统

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XXQQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delphi…...

编程日记 2023/11/25 1:35:56

React项目中发生空白但不报错的原因分析和解决？

文章目录 前言组件渲染问题状态管理问题异步操作问题代码错误但未抛出异常如果我们使用的是chorme浏览器的话&#xff0c;可以下载一个开发者工具&#xff0c;例如下图&#xff1a;代码审查使用调试工具日志和输出检查外部依赖异步操作终极大法&#xff0c;不到万不得已不可以使…...

编程日记 2023/11/25 1:34:55

redis运维(十七)事务

一 redis事务 事务核心参考 ① 基础概念 1、场景引入核心&#xff1a;通过现象思考原因? 2、事务的概念 3、事务四大特性说明&#xff1a; redis只具备部分特性 重点1&#xff1a; 原子性和一致性 重点2&#xff1a; 隔离性和持久性 ② redis的事务 1、基础铺垫备注&…...

编程日记 2023/11/25 1:33:54

Vue框架学习笔记——Vue实例中el和data的两种写法

文章目录 前文提要Vue实例的el第一种写法第二种写法小结 Vue实例中data第一种写法&#xff0c;对象式效果图片第二种写法&#xff0c;函数式效果图片小结 前文提要 本文仅做自己的学习记录&#xff0c;如有错误&#xff0c;请多谅解 Vue实例的el 第一种写法 <body><…...

编程日记 2023/11/25 1:32:53

libbz2 for Mac OS makefile

git地址&#xff1a;git://sourceware.org/git/bzip2.git a文件Makefile # ------------------------------------------------------------------ # This file is part of bzip2/libbzip2, a program and library for # lossless, block-sorting data compression. # # bzip…...

编程日记 2023/11/25 1:31:52

测试工具JMeter的使用

目录 JMeter的安装配置 测试的性能指标 TPS 响应时长 并发连接 和 并发用户 CPU/内存/磁盘/网络 负载 性能测试实战流程 JMeter JMeter快速上手 GUI模式 运行 HTTP请求默认值 录制网站流量 模拟间隔时间 Cookie管理器 消息数据关联 变量 后置处理器 CSV 数据文…...

编程日记 2023/11/25 1:30:52

C++编程——输入

#include<bits/stdc.h> using namespace std; int main(){//beginint a 0, b 0, c 0, d 0, e 0;char f1, f2;char g[30];scanf("%d", &a); //输入整数并赋值给变量ascanf("%d", &b); //输入整数并赋值给变量bscanf("%d", &…...

编程日记 2023/11/25 1:29:51

opencv-直方图

直方图是一种对图像亮度分布的统计表示&#xff0c;它显示了图像中每个灰度级别的像素数量。在OpenCV中&#xff0c;你可以使用cv2.calcHist() 函数计算直方图。 以下是一个简单的示例&#xff0c;演示如何计算和绘制图像的直方图&#xff1a; import cv2 import numpy as np …...

编程日记 2023/11/25 1:28:50

别只盯着Arduino IDE！用PlatformIO配置Seeeduino XIAO开发环境，顺便搞定USB驱动

用PlatformIO解锁Seeeduino XIAO的进阶开发体验 当大多数开发者第一次接触Seeeduino XIAO时&#xff0c;Arduino IDE往往是默认选择。但如果你已经厌倦了手动管理库依赖、缺乏现代IDE功能的工作流&#xff0c;PlatformIO可能是你一直在寻找的解决方案。作为一个开源的跨平台嵌入…...

编程新知 2026/4/25 17:08:01

为什么“多路径投票”能降低大模型幻觉？

大语言模型&#xff08;LLMs&#xff09;的飞速发展&#xff0c;让其在内容生成、逻辑推理、知识问答等领域实现了突破性应用&#xff0c;但“幻觉”问题始终是制约其可靠性的关键瓶颈——模型常常生成看似流畅合理、实则与事实不符的内容&#xff0c;小到编造人名地名&#xf…...

编程新知 2026/4/25 14:12:59

告别复杂后期！用OpenVINO AI插件让Audacity一键分离人声与伴奏 [特殊字符]

告别复杂后期&#xff01;用OpenVINO AI插件让Audacity一键分离人声与伴奏 &#x1f3b5; 【免费下载链接】openvino-plugins-ai-audacity A set of AI-enabled effects, generators, and analyzers for Audacity. 项目地址: https://gitcode.com/gh_mirrors/op/openvino-plu…...

编程新知 2026/4/25 13:10:50

计算机毕业设计Python+PyTorch恶意流量检测系统 信息安全 网络安全(源码+LW+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 技术范围&#xff1a;Sprin…...

编程新知 2026/4/25 12:35:53

OceanBase学习

OceanBase&#xff08;OB&#xff09;是蚂蚁集团完全自研的原生分布式关系型数据库&#xff0c;2010年诞生&#xff0c;支撑支付宝/双11核心交易&#xff0c;金融级高可用&#xff0c;同时兼容 MySQL 与 Oracle 两种模式&#xff0c;是国产分布式数据库的标杆。一、核心定位&am…...

编程新知 2026/4/25 10:24:34

从‘狼人杀’到推荐算法：贝叶斯定理如何悄悄成为你手机里的预言家？

从‘狼人杀’到推荐算法&#xff1a;贝叶斯定理如何悄悄成为你手机里的预言家&#xff1f; 深夜的狼人杀桌游中&#xff0c;当3号玩家突然质疑5号"昨晚为什么守我"时&#xff0c;老手们会不自觉调整对其他玩家的信任值——这种动态变化的"怀疑度"&#xff…...

编程新知 2026/4/25 9:54:24

二分1213123

GESP 202603 五级 T2#include<bits/stdc.h> using namespace std; const int N 1e510; int n,m,a[N],b[N],ans;int main() {cin>>n>>m;for(int i1;i<n;i)cin>>a[i];for(int i1;i<m;i)cin>>b[i];sort(a1,an1);sort(b1,bm1);for(int i1;i&l…...

编程新知 2026/4/25 9:50:20

原神帧率解锁完全指南：如何安全突破60FPS限制，畅享高刷新率游戏体验

原神帧率解锁完全指南&#xff1a;如何安全突破60FPS限制&#xff0c;畅享高刷新率游戏体验 【免费下载链接】genshin-fps-unlock unlocks the 60 fps cap 项目地址: https://gitcode.com/gh_mirrors/ge/genshin-fps-unlock 对于追求极致流畅游戏体验的《原神》PC玩家来…...

编程新知 2026/4/25 8:55:01

不平衡数据分类中的k折交叉验证优化策略

1. 不平衡分类中的k折交叉验证陷阱第一次在信用卡欺诈检测项目中使用k折交叉验证时&#xff0c;我遇到了一个奇怪的现象——模型在验证集上的准确率高达99.8%&#xff0c;但在真实测试数据上却连最简单的欺诈案例都识别不出来。这个惨痛教训让我意识到&#xff1a;传统k折交叉验…...

编程新知 2026/4/25 8:28:05

Arm架构UMLSLL指令解析：高效矩阵运算优化

1. UMLSLL指令深度解析&#xff1a;多向量无符号整数乘减操作在Arm架构的SIMD指令集中&#xff0c;UMLSLL&#xff08;Unsigned integer Multiply-Subtract Long Long&#xff09;指令是一个专门为高效矩阵运算设计的复杂操作。我第一次在Armv9的SME2扩展中见到这个指令时&…...

编程新知 2026/4/25 6:10:08