henry+-CSDN博客

原创 SVG ＜pattern＞标签的用法和应用场景

通过使用标签，可以在 SVG 图像内部定义可重复使用的任意图案。这些图案可以通过fill属性或stroke属性进行引用。

2024-06-20 17:21:45 536

原创高级前端开发需要知道的 25 个 JavaScript 单行代码

1. 不使用临时变量来交换变量的值2. 对象解构，让数据访问更便捷3. 浅克隆对象4. 合并对象5. 清理数组6. 将 NodeList 转换为数组7. 检查数组是否满足指定条件8. 将文本复制到剪贴板9. 删除数组重复项10. 取两个数组的交集11. 求数组元素的总和12. 根据指定条件判断，是否给对象的属性赋值13. 使用变量作为对象的键14. 离线状态检查器15. 离开页面弹出确认对话框16. 对象数组，根据对象的某个key求对应值的总和

2024-06-17 18:01:41 1262

转载纯CSS+单个div实现抖音LOGO

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

2024-06-08 12:23:08 32

原创 2024 Web 新特性 - 使用 Popover API 创建弹窗

Popover API正是为了简化这一过程而生，它为Web开发者提供了一套标准化的方法来创建和控制弹出窗口，确保了跨浏览器的一致性和易用性。Popover API 为开发者提供了一种声明式的方式来创建各种类型的弹窗。本文演示了如何使用 Popover API 创建弹窗

2024-06-07 11:38:13 511

原创使用 JS 实现在浏览器控制台打印图片 console.image()

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

2024-05-17 13:40:41 600

原创如何使用 JS 判断用户是否处于活跃状态

有时候，我们需要在网页判断用户是否处与非活跃状态，如果用户长时间没有在页面上进行任何操作，我们则判定该用户是非活跃的。在 javascript 中我们可以通过来判定用户是否在活跃中。

2024-05-16 22:03:35 236

原创笔.COOL，一个功能完备、使用便捷的在线HTML/Vue代码编辑器和作品分享平台

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

2024-05-12 21:42:50 529

原创如何使用 JavaScript 获取当前页面帧率 FPS

可以通过计算每秒window.requestAnimationFrame的调用频率来做为 FPS 值。它接收一个回调函数，该回调函数会在浏览器下一次重绘之前执行。所以只要我们循环调用并记录单位时间内的调用次数就能计算当前页面的帧率了。

2024-05-12 21:21:11 561

henry47的博客