前端
文章平均质量分 78
ZSK6
一个好吃懒做、游手好闲、不误正事和自由浪漫的前端技术员
展开
-
【前端】实现快速改变内容大小选择框
简单实现选择框改变内容大小和位置。原创 2024-05-08 18:01:27 · 312 阅读 · 0 评论 -
【前端】实现表格简单操作
表格合并基础篇本篇是在上一章的基础上实现,实现了的功能有添加行、删除行、逆向选区、取消合并功能。添加行分为在上面添加和在下面追加行。利用 insertAdjacentElement 方法实现,该方法可以实现从前插入元素和从后插入元素。删除当前行就是利用元素remove()方法,从dom树种删除元素。逆向选区是指选区从下往上选。解决思路:记录当前选区时鼠标移动方向,往左上移动则为负,往右下移动则为正。负时在首位插入选中节点,正时从尾部追加选中节点,这样合并只需取第一个选中节点即可。获取当前元素原创 2024-05-06 16:24:11 · 896 阅读 · 0 评论 -
【前端】查找元素在父元素中的索引
如何查找指定元素在其父元素的位置?Elementmdn官网,包含了元素对象的很多属性和方法,可以很方便的对元素进去处理,建议浏览了解下。原创 2024-05-06 15:58:06 · 288 阅读 · 0 评论 -
【前端】表格合并如何实现?
介绍实现表格合并的一种方法。原创 2024-04-29 17:42:57 · 398 阅读 · 0 评论 -
【canvas】canvas综合运用:心形图案
心形图案可以两个椭圆相交组合,也可以直接画路径实现。原创 2024-04-18 13:41:49 · 311 阅读 · 0 评论 -
【canvas】canvas的综合运用:输入文本
利用canvas实现文本的输入和显示。原创 2024-04-17 17:10:25 · 818 阅读 · 0 评论 -
【canvas】canvas基础使用(十):文本样式
canvas上下文有一些属性可以更改文本的样式。原创 2024-04-16 16:23:38 · 936 阅读 · 0 评论 -
【canvas】canvas基础使用(九):文本绘制
canvas除了能够绘制图形外,也可以绘制文本。原创 2024-04-16 14:50:07 · 661 阅读 · 0 评论 -
【canvas】canvas基础使用(八):canvas状态
这两个方法还是比较重要的,一般搭配其他属性或方法使用。结束了。原创 2024-04-15 15:49:01 · 331 阅读 · 0 评论 -
【canvas】canvas基础使用(七):绘制图像
学习canvas如何绘制图片或视频。给定一个图像,一般使用drawImage()方法绘制。Canvas 2D API 中的 CanvasRenderingContext2D.drawImage() 方法提供了多种在画布(Canvas)上绘制图像的方式。语法:指定绘制位置快速绘制:drawImage(image, dx, dy);指定绘制位置宽高快速绘制:drawImage(image, dx, dy, dWidth, dHeight);指定图像被绘制区域和绘制区域绘制:drawImage(im原创 2024-04-15 15:42:00 · 1141 阅读 · 0 评论 -
【canvas】canvas的综合运用:图片裁剪
使用canvas实现图片裁剪功能。有一些边界情况要处理。例如,裁剪框边界情况,图片过小缩放后模糊情况等。原创 2024-04-12 17:06:18 · 1179 阅读 · 0 评论 -
【canvas】canvas基础使用(七):图形变换
图形变换是比较危险的操作,一般搭配canvas的状态方法使用。原创 2024-04-12 10:30:40 · 562 阅读 · 0 评论 -
【canvas】canvas基础使用(六):图形阴影
阴影一般不使用。原创 2024-04-11 22:55:02 · 398 阅读 · 0 评论 -
【canvas】canvas的基础使用(五):填充和描边样式
学习如何设置canvas上下文的填充和描边样式。原创 2024-04-11 16:07:30 · 833 阅读 · 0 评论 -
【canvas】canvas基础使用(四):线型的设置
学习如何使用canvas来设置线形。原创 2024-04-10 16:05:41 · 661 阅读 · 0 评论 -
【canvas】canvas基础使用(三):快速绘制矩形方法
canvas实现了快速绘制矩形的方法。原创 2024-04-10 14:37:48 · 1030 阅读 · 0 评论 -
【canvas】canvas基础使用(二):使用canvas路径绘制点、线、面
学习canvas路径绘制点、线、面的api。原创 2024-04-08 20:58:26 · 1106 阅读 · 0 评论 -
【canvas】canvas的基础使用(一):创建canvas
Canvas API 提供了一个通过JavaScript 和 HTML的\元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于 2D 图形。原创 2024-04-08 17:24:49 · 868 阅读 · 0 评论 -
【前端】使用Web Audio API 技术播放音乐
音频节点通过它们的输入输出相互连接,形成一个链或者一个简单的网。一般来说,这个链或网起始于一个或多个音频源。这些节点的输出可以连接到其他节点的输入上,然后新节点可以对接收到的采样数据再进行其他的处理,再形成一个结果流。最后节点流再输出。音频节点就是 AnalyserNode、GainNode 、AudioContext 对象等。原创 2024-03-27 14:20:09 · 1783 阅读 · 0 评论 -
【前端】Web Audio API接口介绍
记录下Web Audio API接口的介绍。Web Audio API 提供了在 Web 上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对音频添加特效,使音频可视化,添加空间效果(如平移),等等。原创 2024-03-22 15:52:27 · 1068 阅读 · 0 评论 -
【JavaScript】使用剪切板的几种方法
Clipboard API不能用时,可以使用document.execCommand()方法,若两者都不可以使用,可以考虑引导用户手动复制。原创 2024-03-20 14:58:12 · 1365 阅读 · 0 评论 -
【前端】多个标签省略效果
多个标签省略效果实现。这个方法有一定的局限性,父元素宽度上下限最好设置span元素所占区域的倍数在多10或20px。原创 2024-03-20 11:23:41 · 207 阅读 · 0 评论 -
【WebAssembly】WebAssembly概念介绍和在js中使用
记录下WebAssembly的概念和在JavaScript中的使用方法。原创 2024-03-15 14:56:46 · 996 阅读 · 0 评论 -
【JavaScript】使用debugger语句快速开启浏览器调试代码工具
有的时候我们想开启浏览器代码调试功能,这个时候应该使用debugger语句。原创 2024-03-14 17:38:36 · 321 阅读 · 0 评论 -
【npm】前端工程项目配置文件package.json详解
详细介绍了package.json中每个字段的作用。原创 2024-03-08 15:55:57 · 1455 阅读 · 0 评论 -
【Web】什么是web的事件循环?
web的事件循环是一种解释执行网页代码的机制。**事件循环负责收集事件(包括用户事件以及其他非用户事件等)、对任务进行排队以便在合适的时候执行回调。**然后它执行所有处于等待中的 JavaScript 任务,然后是微任务,然后在开始下一次循环之前执行一些必要的渲染和绘制操作原创 2024-02-21 23:44:03 · 1043 阅读 · 0 评论 -
【Web】CORS概念性描述
CORS(Cross-Origin Resource Sharing,跨源资源共享)是一个系统,它由一系列传输的 HTTP 标头组成,这些 HTTP 标头决定浏览器是否阻止前端 JavaScript 代码获取跨源请求的响应。原创 2024-02-02 22:53:02 · 654 阅读 · 0 评论 -
【v8】v8处理js的流程分析
记录下学习v8处理js流程分析的过程。V8 是 Google 开源的 JavaScript 引擎,被广泛应用于各种 JavaScript 执行环境,比如 Chrome 浏览器、Node.js、Electron 等。原创 2024-01-17 17:22:53 · 905 阅读 · 0 评论 -
【html】Video元素的属性介绍和用法
video元素的出现,使得网页文档可以播放音视频,弥补了本无法播放视频的缺陷,以前使用其他插件播放(例如flash)。它也可以替代canvas,作为WebRTC数据的载体。原创 2024-01-15 17:03:26 · 1923 阅读 · 0 评论 -
【Canvas】使用canvas实现多点连线效果
这是一个特别简单的圆点连线canvas动画。如果你有兴趣,可以根据此基础上扩展出更好玩的互动效果,点击改变中心点,然后圆点朝点击坐标缓动等等。圆点的数据结构(可以扩展圆点样式)。移动轨迹(方向、速度)。圆点数据有变化时,要及时更新画布。可优化点:是碰撞判断逻辑、圆点数据处理、requestAnimationFrameAPI封装一个可以指定ms数更新的函数(这样圆点数据变多浏览器不会报超时警告,根据实际数据处理速度动态变化画布更新时机)。原创 2024-01-12 13:42:08 · 842 阅读 · 1 评论 -
【WebSocket】使用ws搭建一个简单的在线聊天室
WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此 API,你可以向服务器发送消息并接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应。webscokets 包括webscoket接口、CloseEvent接口 和MessageEvent接口。WebSocket是一种基于TCP的全双工通信协议,可以更好的节省资源和带宽实现即时通讯,是一种持久化的协议。ws 是一个简单易用、速度极快、经过全面测试的 WebSocket 客户端和服务器实现库。原创 2023-12-06 16:39:26 · 684 阅读 · 0 评论 -
【前端】利用正则生成目录,附加解决a链接锚点偏移
从html字符串中提取出来目录。目标和源内容都很明确,源内容是**html字符串**,提取目标是**html字符串中h1~h6元素和其闭合标签中间的内容**。原创 2023-12-01 16:59:49 · 1075 阅读 · 0 评论 -
【canvas】在Vue3+ts中实现 canva内的矩形拖动操作。
canvas内的显示内容如何拖动?这里提供一个 canvas内矩形移动的解决思路。这个canvas拖动如果封装好的话,感觉是很有用的。原创 2023-11-10 17:39:55 · 730 阅读 · 0 评论 -
【前端】使用tesseract插件识别提取图片中的文字
有时候项目需要识别证照信息,或者拍照搜索内容等。图片处理一般是后端处理比较好,不过前端也有相关插件处理原创 2023-10-20 18:02:43 · 1485 阅读 · 0 评论 -
【html】利用生成器函数和video元素,取出指定时间的视频画面
有的时候想截取视频某一秒的视频画面。手动截取操作麻烦,还得时刻关注视频播放时间。于是,我搞出来了一个根据视频自动截取特定时间描述的页面。原创 2023-10-13 17:01:23 · 968 阅读 · 0 评论 -
常见图像文件类型描述
翻译自常见图像文件类型.希望对你有所帮助。原创 2023-08-23 10:29:32 · 169 阅读 · 0 评论 -
【bug】记录一次使用Swiper插件时loop属性和slidersPerView属性冲突问题
最近在vue3使用swiper时,突然发现loop属性和slides-per-view属性同时存在启用时,loop生效,下一步只能生效一次的bug,上一步却是好的。非常滴奇怪。原创 2023-08-04 16:13:33 · 1911 阅读 · 2 评论 -
记录下ios中文输入法时输入字母带有空格的解决方案
在ios原生输入框时,中文输入法输入时,输入框中的字母会有空格间隔。# 去掉空格这个空格的字符是 **\u2006** ,这个字符在经过编码处理后会变成?显示。这明显不符合要求,所以我们要把他替换掉。原创 2023-07-11 17:24:21 · 1009 阅读 · 0 评论 -
利用css动画实现打字机效果
这里主要运用的是步长动画,另外要注意一行文字的长度,然后根据长度,改变步长。多行打字机也是如此,一般最后一行需要特殊处理。原创 2023-01-16 20:30:00 · 4545 阅读 · 0 评论 -
实现动态改变侧边栏宽度效果
左侧边栏树结构层级太深,导致显示不全,在右侧有空余区域的情况下,希望可以动态改变左侧栏的宽度。这里只是简单实现了效果,你可以根据思路实现封装(滑动方向、滑动距离限制等)。原创 2022-12-16 17:59:07 · 246 阅读 · 0 评论