全部文章
共 1299 篇文章
H5绘图和动画H5
1 使用canvas 标签创建一块画布，属性有：id（标识画布，以便js对其引用），width（宽度），height（高度）。默认情况下画布大小为宽300px，高150px。 注意，与不同，需要结束标签，如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来 在canvas中，坐标原点（0,0）位于canvas画布的左上角，x轴水平向右延伸，y轴垂直向下延伸，所有元素的位置都相对于原点进行定位。 浏览器兼容： 老版本...
使用 Web Audio API 实现实时音频可视化
1\. 引言 1.1 Web Audio API 简介 Web Audio API 是一项强大的浏览器技术，它使我们能够以程序化的方式处理和分析音频数据。通过这个 API，我们可以在浏览器中创建各种音频应用，从简单的音频播放器到复杂的音频处理和可视化工具。Web Audio API 提供了一组强大的接口，使得在 Web 中处理音频变得更加容易。 这个 API 的核心是 对象，它代表了音频处理的上下文环境。在这个环境中，我们可以创建各种音...
关于window.open 被浏览器拦截解决方案
前言 在项目开发中，点击支付按钮后需要发送支付请求，并在请求完成后的回调中，经过一系列判断，符合某种条件下弹出一个新窗口页面。自然想到使用 ，但发现该操作会被浏览器拦截。 分析原因 当浏览器检测到非用户操作产生的新弹出窗口时，会对其进行阻止，因为浏览器认为这可能是广告，不是用户期望的页面。 注意： 如果 是在用户触发事件（如点击事件）或页面加载时调用，则不会被拦截；而一旦将弹出代码放入 Ajax 回调或异步代码中，可能就会被拦截。 例如...
前端小玩具~错误捕获定位工具
正文 我们在平时的工作中，开发功能的同时不可能把场景考虑的面面俱到，而生产环境往往情况是非常复杂的，用户录入进去的数据总是千奇百怪，那如果遇到问题的话，我们又要如何进行排查呢？总不可能让用户录个屏吧哈哈 所以我们就出现了 前端埋点 的操作，不过埋点的方向以及文章都挺多的，也都挺复杂的，这篇文章我们就讲一个比较有趣的 错误捕获思路 。 我们平时在使用框架开发 遇到bug 时，比如 Vue ，如果是在本地环境，我们在控制台可以很容易的找到出...
古卷轴展开动画
本文主要介绍了古卷轴展开动画的实现，包括 jquery 版本和 react 版本，还实现了从中间展开的动画效果和从右向左展开的动画效果。 当然，还可以结合 效果，实现古诗词淡入动画和古画卷展开动画的组合效果。 jquery 版本 在网上找了一个 jquery 版本的实现，具体 demo 可以查看下列网址： 动画实现代码如下所示，直接从 demo 中复制过来，直接使用即可。 react 版本 上述是用 jquery 实现的版本，但是一般现...
如何判断鼠标点击了元素的外部
1\. 前言 在实际开发时会有这样的需求：点击某一个按钮出现一个弹窗，然后点弹窗的其他区域时需要关闭弹窗，如果是点击的弹窗本身，除非是关闭操作，否则不关闭弹窗。本文将简单介绍几种这种需求的几种实现方案。 2\. 实现 2.1. 通过失焦事件来实现 首先，失焦事件并不是表单元素的专利，通过添加tabindex可以可以让任意一个元素获取失焦事件。 什么是 ？ 属性可以有三个值： ：元素可以获得焦点，并且可以通过键盘导航（通常是Tab键）到达...
el-select 的动态宽度解决方案
<span style="color: #252933;" elementui plus单选解决方案</span <span style="color: #252933;" .el select \ placeholder {</span <span style="color: #252933;" position: relative;</span <span style="color: #252933;" top: none;</sp...
ESLint 正式支持 JSON 和 Markdown
ESLint 团队近日宣布，ESLint 现已支持对 JSON 和 Markdown 文件进行代码检查。这标志着 ESLint 向提供语言无关的源代码代码检查平台迈出了重要的一步。 背景 早在七月份，ESLint 团队就发布了未来发展计划，提到将 ESLint 转型为更通用的 Linter，能够支持多种编程语言。经过几个月的努力，团队成功地提取了与 JavaScript 特定相关的核心功能，使 ESLint 现在能够对 JSON 和 M...
React表单：formik、final-form和react-hook-form
表单无处不在，它是每个网站的必备部分。在用React构建web应用时，处理表单是不可避免的。 你可以选择自己的方式来处理，或者选择社区中现成的库。然而，当你选择一个第三方库时，你会立即面临一个问题：有太多的库可供选择。 选择一个库是一件棘手的事情，随意选择一个GitHub上星标多的库并不总是明智的。你肯定需要阅读文档、代码示例，并多次尝试，才能确定这是你想要用于自己项目的库。 对于处理表单，我们有以下选择： | 库名称 | GitHub...