UD5工具箱
轮询机制模拟器 - setInterval 数据请求演示
模拟客户端定时请求服务器数据，展示网络延迟和响应，对比短轮询效率。
标签： 演示文稿工具
共 87+ 款工具beforeunload 事件演示 - 页面离开确认对话框
激活 beforeunload 事件，尝试刷新或关闭标签页时会弹出浏览器确认提示，展示实现方式。
粘贴事件处理演示 - 监听并解析剪贴板内容
捕捉页面粘贴事件，展示文本、HTML 或图片数据，演示如何定制粘贴行为。
浏览器录音演示 - MediaRecorder API 录制音频
使用浏览器内置 MediaRecorder 录制麦克风音频并下载为 WAV 或 WebM 文件。
HTML 拖放 API 演示 - 文件与元素拖拽交互
通过实例展示原生拖放 API 的使用，包括文件拖拽上传和页面元素排序功能。
XSS 过滤器测试沙盒 - 输入转义与过滤演示
输入可能的攻击向量，选择不同的转义或过滤策略，实时查看是否被安全处理，教育安全开发。
Canvas 指纹演示工具 - 图形渲染差异识别设备
通过绘制隐藏图形并获取像素哈希，展示 Canvas 指纹如何用于跟踪用户，并给出防护建议。
WebGL 指纹展示 - GPU 渲染器与扩展信息
获取显卡型号、WebGL 参数和扩展信息，展示 WebGL 指纹的独特性和隐私风险。
广告拦截器检测演示 - 判断用户是否启用拦截
通过加载测试广告脚本或元素来检测浏览器是否启用广告拦截插件，并展示检测原理。
PGP加密解密演示 - 公钥加密私钥解密
生成临时密钥对，演示非对称加解密短消息的过程。
Tor 电路构建模拟演示 - 洋葱路由中继选择可视化
可视化展示 Tor 如何选择入口、中间和出口节点建立电路，帮助理解匿名通信原理。
X-Forwarded-For 模拟器 - 代理链 IP 追加演示
模拟多层代理逐步添加 X-Forwarded-For 头的过程，理解如何获取真实客户端 IP。
简易机器翻译演示 - 前端调用本地模型模拟
使用示例翻译对演示翻译过程，了解机器翻译基本界面。
WebGPU 渲染基础三角形 - 入门演示
使用 WebGPU API 绘制一个彩色三角形，展示初始化、管线、着色器和绘制循环。
线段树区间查询演示 - 构建/更新/查询
可视化线段树的构建、单点更新和区间求和查询过程，理解树状结构。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
Delaunay 三角剖分演示 - 空圆特性
逐步添加点并增量式构建 Delaunay 三角网，展示边翻转操作。
声明式链接捕获演示 - 一键打开PWA
设置capture_links清单字段，让浏览器在点击链接时自动打开PWA而不是新标签页。
最大团问题图例演示 - 穷举搜索与启发式
在无向图上查找最大团，高亮显示顶点，演示回溯或启发式搜索过程。
NFC 只读演示 - 扫描并显示 NDEF 记录
使用 Web NFC 读取附近标签的 NDEF 消息，展示每条记录的类型和内容。
CSS 混合模式在线演示 - mix-blend-mode 与 background-blend-mode 预览
选择不同的混合模式并调整背景与前景，实时查看混合效果，支持所有标准混合模式。
二分图最大匹配 Hopcroft-Karp 演示
展示 Hopcroft-Karp 算法寻找最大匹配的过程，包括 BFS 和 DFS 阶段。
Datalist 自动建议增强演示 - 动态数据源
演示如何动态更新 datalist 选项以实现搜索建议，并处理键盘选择。
交叉观察器应用演示 - 滚动曝光与懒加载
演示元素进入视口时触发懒加载和曝光埋点，并展示当前可见比例。
布隆过滤器演示 - 添加元素与存在性检查
使用多个哈希函数和位数组，演示布隆过滤器的添加和查询，计算误判率。
Contact Picker 多属性获取演示 - 选择联系人信息
使用 Contacts Picker API 从系统通讯录中选择姓名、邮箱和电话等多个字段。
用户空闲检测高级演示 - 区分空闲/锁定
使用Idle Detection API区分用户是临时空闲、键盘无活动还是屏幕已锁定。
HTML Input 类型全览演示 - 每个type实时渲染
列出从text到color的所有input type，旁边实时展示控件的原生渲染，表单开发参考。
CSS颜色混合演示 - color-mix()实时预览
选择两个颜色和色彩空间，调整混合比例，实时预览并生成CSS color-mix()函数代码。
文本换行策略对比 - overflow/break演示
输入长单词或URL，切换overflow-wrap和word-break属性值，对比溢出自适应效果。
页面生命周期事件演示 - freeze/resume等
展示页面从active到frozen等状态切换事件，记录日志，帮助理解浏览器优化机制。
数字滤波器设计器 - 低通/高通/带通
在Canvas上绘制理想频率响应，并应用简单FIR滤波器对合成信号进行滤波，听音效对比。
暗黑模式切换演示 - 三种实现对比
对比用CSS媒体查询、类名切换和localStorage持久化三种暗黑模式实现方式。
无限滚动演示 - Intersection Observer加载更多
演示如何用Intersection Observer实现滚动到底部自动加载内容的经典模式。
WebGPU 计算着色器演示 - 并行矩阵乘法
使用 WebGPU 编写计算着色器执行矩阵乘法，对比 CPU 性能。
WebCodecs API 图像解码器 - 解码 JPEG/PNG 帧
使用 ImageDecoder API 解码图片并逐帧显示（若为动图），展示底层编解码能力。
在线要点演示器 - 类似PPT的极简演讲
输入Markdown风格要点列表，全屏展示时逐步放大当前项，类似非线性的展示。
HTML输入类型大全 - 所有type现场演示
展示所有HTML input type（text, password, date, color等）的渲染效果。
事件冒泡/捕获演示 - 交互模型可视化
嵌套的彩色方块，点击内层观察事件传播顺序，直观理解addEventListener的第三个参数。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
scheduler.postTask优先级演示 - 用户交互优先
使用scheduler.postTask API安排不同优先级的任务，并观察执行顺序。
可读流控制器 - 自定义ReadableStream
创建一个自定义ReadableStream，像生成器一样逐步推送数据，并用WritableStream消费。
指针锁定 API 演示 - 3D 迷宫移动
使用指针锁定 API 在 3D 场景中控制视角移动，模拟 FPS 游戏鼠标控制。
CSS级联层演示 - @layer优先级可视化
交互式调整@layer顺序和选择器，实时观察CSS级联层如何影响样式应用，学习现代特性。
发布订阅模式演示 - 自定义事件总线实现
可视化展示发布/订阅模式的运作，添加订阅者和发布者，查看事件流。
屏幕唤醒锁测试 - 保持常亮及事件监听
请求和释放屏幕唤醒锁，并监听释放事件，适用于视频播放或演示场景。
自动纠错演示 - 基于字典的拼写修复
输入错误文本，自动寻找最可能正确单词替换，展示编辑距离原理。
CSRF防护概念演示 - Token验证流程
模拟跨站请求伪造攻击以及如何通过CSRF Token进行防护的流程演示。
OAuth流程模拟器 - 授权码/PKCE演示
逐步演示OAuth 2.0授权码流程或PKCE流程，展示参数跳转和Token交换。
WebSocket 压缩扩展演示 - permessage-deflate 效果
建立带压缩扩展的 WebSocket 连接，对比压缩前后消息大小。
请求节流演示器 - 滑块/桶算法可视化
动画展示滑动窗口和令牌桶算法如何限制API请求速率，对比两者差异。
PWA安装横幅演示 - 触发beforeinstallprompt
演示如何拦截PWA安装事件并自定义安装按钮，查看浏览器原生安装提示效果。
滚动捕捉沙盒 - CSS Scroll Snap实验
调整滚动容器和子项的对齐方式、停止点，观察CSS Scroll Snap平滑滑动效果。
无障碍名称计算演示 - 元素的可访问名称来源
选择一个元素，展示浏览器如何根据 ARIA 属性、内容、label 等计算其可访问名称。
DOM 事件传播模拟器 - 捕获与冒泡阶段可视化
构建嵌套元素，触发事件并逐步显示事件流经路径，可切换捕获/冒泡模式。
航班动态查询模拟 - 演示航班延误信息
输入（虚拟）航班号，显示模拟的登机口、延误状态等，用于教学或演示。
SQL JOIN 类型交互演示 - 韦恩图与结果预览
选择表A和表B的样本数据，查看INNER/LEFT/RIGHT/FULL JOIN的韦恩图与实际输出结果。
ResizeObserver演示 - 响应元素尺寸变化
拖拽改变一个div的大小，通过ResizeObserver API实时显示其新的宽度和高度。
Web Component 生命周期演示 - 自定义元素钩子调用
创建一个自定义元素，展示 constructor、connectedCallback、attributeChangedCallback 等钩子的触发时机。
K-Means聚类演示器 - 交互式数据分类
在Canvas上随机撒点，运行K-Means算法，观察中心点迭代移动和簇的形成。