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

js前端跨屏效果

news 2026/2/5 1:01:14

 效果:

三个球

源码: 

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/12/12 0:56:22

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2026/2/4 23:58:48

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/1/20 22:45:38

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/29 15:43:26

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

编程新知 2025/6/10 21:26:51

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01