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

js前端跨屏效果

news 2025/9/22 13:08:25

 效果:

三个球

源码: 

<!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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/9/22 11:25:43

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/9/21 14:37:15

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/9/21 5:48:14

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/9/22 6:30:07

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/9/22 6:31:02

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/9/11 12:54:52

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/9/14 12:35:04

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/6/20 13:47:44

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/8/25 22:27:27