灯光

摘要： 通过使用 阅读全文

摘要： 1. 不使用临时变量来交换变量的值 2. 对象解构，让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断，是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组，根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19. 求某对象所有属性值的最大值 20. 判断对象的值中是否包含有某个值 21. 安全访问深度嵌套的对象属性 22. 条件执行语句 23. 创建包含值为指定数字范围的数组 24. 提取文件扩展名 25. 切换元素的 class 阅读全文

摘要： 纯CSS+单个div就能绘制抖音LOGO。 主要借助了两个伪元素实现了整体结构，借助了 drop-shadow 生成一层整体阴影。 drop-shadow 只能是单层阴影，所以另一层阴影需要多尝试。 contrast(150%) brightness(110%) 则可以增强图像的对比度和亮度，更贴近抖音LOGO的效果。 阅读全文

摘要： Popover API 为开发者提供了一种声明式的方式来创建各种类型的弹窗。目前已在所有三大浏览器引擎中可用，并正式成为 Baseline 2024 的一部分。 阅读全文

摘要： 在前端开发过程中，调试的时候，我门会使用 console.log 等方式查看数据。但对于图片来说，仅靠展示的数据与结构，是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上，或将图片下载下来进行预览。但这样的调试过程实在是复杂，何不实现一个 console.image() 呢？ 阅读全文

摘要： 有时候，我们需要在网页判断用户是否处与非活跃状态，如果用户长时间没有在页面上进行任何操作，我们则判定该用户是非活跃的。 在 javascript 中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是否在活跃中。 阅读全文

摘要： 笔.COOL 提供了一个功能完备、使用便捷的在线HTML代码编辑和作品分享平台，无论是为了展示你的前端作品、复现 BUG，还是学习其他人的代码，笔.COOL 都是一个非常好的选择。无论你是初入前端的新手还是经验丰富的老鸟，都能在这里找到属于自己的乐趣和价值。 阅读全文

摘要： 可以通过计算每秒 window.requestAnimationFrame 的调用频率来做为 FPS 值。 阅读全文

摘要： 实现说明： 1、先通过 new Image() 载入图片； 2、图片加载成功后使用 drawImage() 将图片绘制到画布上； 3、最后使用 fillText() 函数绘制水印。 下面展示了详细用法 效果展示： 本案例将图片的四个角都加上水印 在线演示 https://bi.cool/bi/P4O 阅读全文

摘要： 实现说明： 在 JS 中 canvas 原生没有支持对文字间距的调整，我们可以通过将文字的每个字符单独渲染来实现。本案例从 CanvasRenderingContext2D 对象的原型链上扩展了一个用于绘制带间距的函数 fillTextWithSpacing()，使用方式与原生 fillText() 阅读全文