JS-API

介绍 Browser95-404 是一个 Windows 95 主题的 404 页面。页面显示为 Windows 95 的桌面，可以点击桌面上的图标进行一些交互，效果如下： 交互 桌面上随机位置有一个

介绍 如果您有一个页面，您希望用五彩纸屑特效引起您的用户注意，那么这个插件就是为您准备的。去年介绍过一个很好用的插件 canvas-confetti，掘金年度作者投票按钮的特效就是使用的这个，两者对比

UI 组件是指 Web 页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的 UI 组件具备正确性、封装性、扩展性、复用性。

我们知道，一个网页通常分为三层，JS 负责行为，CSS 负责表现，HTML 负责结构。在写页面时，遵循 HTML、CSS、JS 各司其职的原则，各自实现对应的功能，这样的好处不仅便于后续代码的维护扩展

Hello，掘友们好！又是一年新春之际，祝福大家兔年快乐！给大家介绍一个有趣的动效（兼容 IE），页面右下角有一只搞怪的兔子，鼠标在页面中悬停时，兔子会跟着做出不同的动作和表情。然后可以在页面中任意位

我们通过在页面中定义一个文件上传按钮，选择图片文件后，会将文件保存到 IndexedDB 数据库中，当我们刷新页面，或关闭页面后，再次进入，会发现图片文件可以从 IndexedDB 数据库中读取，然后

后端开发者都知道，SQL 语句中有 BETWEEN 操作符和 COUNT() 函数可以用来对匹配的记录进行过滤和计数。IndexedDB 也提供了 IDBKeyRange 接口和 IDBObjectS

将大量数据储存在客户端，这样可以减少从服务器获取数据的压力，提升用户体验。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；Storage

IndexedDB 属于 NoSQL 和事务型面向对象数据库系统。对数据库的所有操作，都要通过事务完成。下面我们通过一个项目管理的增删改查来演示 IndexedDB API 的使用。

File System Access API 允许直接读取、写入或保存对用户设备上的文件和文件夹的更改。此 API 使开发人员能够构建功能强大的 Web 应用程序，例如 IDE、文本编辑器、图片编辑

以前我们更改 input type=file 文件选择框的样式，要么隐藏文件选择输入框，然后使用 <label> 元素模拟文件选择框，或者使用 CSS 伪元素 ::file-selector-butt

给图片添加水印可以帮助网站或作者保护自己的版权，或防止内容被别人利用。给图片添加水印分为添加文字水印和添加图片水印。Canvas 图片水印合成与 Canvas 实现图片压缩 原理基本相同：

图片压缩原理：CanvasRenderingContext2D.drawImage() 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像。HTMLCanvasElement.toD

而在不使用第三方库的情况下，利用 SVG 代码可以内联在 base64 字符串中的特性，通过原生的 SVG forginObject 元素也可以实现对 DOM 元素截图。

Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。它还能能够以 png、jpg 或 webp 格式保存图像。

Web Animations API 可以把 CSS3 实现的 animation 动画由 JS 代码实现。它通过组合两个模型来实现：时序模型（CSS transitions）和动画模型（CSS an

运算符包括赋值，比较，算数，位运算，逻辑，模板字符串，三元等。空值合并 、可选链、求幂、数字取整、标签函数...

随着浏览器的更新，有些功能，我们使用浏览器自带的 API，而不必依赖第三方库，或使用复杂的代码就可以实现。

Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。它还能能够以 png、jpg 或 webp 格式保存图像。

如何在外部修改已定义的 Web Components 的 Shadow DOM 内部样式？下面是两种方法。在安卓手机，苹果手机和 PC 端测试，都可以完全支持，查看到效果。而 is 属性目前只有 Sa