自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(39)
  • 资源 (2)
  • 收藏
  • 关注

原创 javascript经典练习题-语法与特性

下面这段精心整理的内容,呈现了一系列丰富多样的练习题集,它们专注于JavaScript编程语言的两个核心方面——语法和特性。这些练习题旨在帮助学习者系统地巩固基础知识,并在实践中不断提升他们的JavaScript编程技能,从而为进一步探索和运用这门强大的编程语言奠定坚实的基础。

2025-02-28 18:09:05 365

原创 JavaScript数据结构-Set的使用

在 JavaScript 中,Set 是 ES6 引入的一个新数据结构,它允许我们存储一组唯一的值。这使得 Set 成为许多场景下的理想选择,特别是当我们需要对数组进行去重操作时经常被提起和使用。

2025-02-28 14:01:54 754

原创 javascript经典练习题-数组篇

要求数组中的每个元素向右“移动”指定的次数。比如,给定 [1, 2, 3, 4, 5],右移 2 次后数组应变成 [4, 5, 1, 2, 3]描述:给定一个数组以及一个目标值,需要从该数组中找出所有两数之和等于目标值的数对,并以二维数组的形式输出这些符合条件的数对。描述:素数是指大于1的自然数,除了1和它本身外,不能被其他自然数整除的数。例如[1, [2, [3, 4]]]转为[1, 2, 3, 4]‌。描述:取交集的意思是找出两个数组中都存在的元素,并且确保最终结果中的每个元素都是唯一的。

2025-02-28 11:26:15 191

原创 浏览器控制台console命令详解

在Web开发的过程中,合理且巧妙地运用console方法,就如同为我们的开发之旅点亮了一盏明灯,能让我们在复杂多变的代码世界中拥有更好的调试体验。通过充分利用console提供的各种功能,我们能够更加深入、细致地观察程序的运行状态,及时发现并解决潜在的问题,从而提升开发效率,优化代码质量,为打造更加优质、稳定的Web应用奠定坚实的基础。

2025-02-26 17:41:09 2011

原创 JavaScript算法-合并两个有序链表

如果l1是null(即空链表),那么函数直接返回l2。空间复杂度:O(M + N),在最坏的情况下(当链表完全不平衡时),因为递归调用栈的深度可能达到M + N。时间复杂度:O(M + N),每个节点都只被访问一次,并且每次递归调用都会处理一个节点。使⽤递归的方式来实现,将两个链表头部较⼩的⼀个与剩下的元素合并,并返回排好序的链表。比较l1和l2当前节点的值(l1.val和l2.val)。同样,如果l2是null,函数返回l1。头,当两条链表中的⼀条为空时终⽌递归。M、N 是两条链表 l1、l2 的⻓度。

2025-02-26 14:01:28 428

原创 JavaScript数据结构-模拟链表

链表作为一种基础且重要的线性数据结构,在数据处理领域发挥着独特作用,尤其在应对频繁的插入与删除操作时展现出显著优势。深入了解并熟练掌握链表的基本操作以及更为复杂的进阶操作,能够为解决各类实际问题提供有力的支持。

2025-02-25 17:50:43 602

原创 javascript数据结构与算法

数据结构:数据的组织形式,如数组、链表、树、图等,用于高效存储和访问数据算法:解决问题的步骤,是指令的有限序列,其中每条指令表示一个或多个操作。它具备有穷性(有限步骤内完成)、确定性(每一步都有确切含义)、可行性(能通过有限次操作实现)等基本特性数据结构为算法提供了操作的对象和基础,而算法则通过操作这些数据结构中的数据来实现特定的功能和性能要求

2025-02-25 16:32:04 959

原创 解决element-ui的el-select使用filterable属性时,下拉框展开后,点击箭头图标收不回去问题

问题:当el-select下拉组件设置filterable属性时,下拉框展开后,再点击箭头图标下拉框收不回去了。在el-select标签上新增事件 @visible-change=“selectVisibleChange” @focus="selectFocus"的处理。

2025-02-20 15:21:39 344

原创 git-使用git stash命令解决拉取代码时存在冲突导致拉取失败问题

在很多时候我们拉取代码时,会存在代码冲突导致拉取失败,这种情况下如果我们直接去修改代码那就太麻烦了。我们可以使用和两个命令巧妙的解决这个难题,它们主要用于临时保存和恢复工作进度。

2025-02-20 11:59:28 1086

原创 JavaScript网页设计8个经典案例

以上这些JavaScript案例涵盖动态效果、交互功能等等,便于提升用户体验,为开发者提供学习资源。同时在实际项目中扩展和优化,能助力网页设计更上一层楼。

2025-02-08 17:19:19 725

原创 解决Element UI中el-select下拉框因为选项内容过长导致下拉框宽度显示过长问题

在使用el-select下拉框时,当选项的内容过长就会自动撑开下拉框容器,导致下拉框的宽度显示异常,影响页面美观我们更倾向于下拉框的宽度和el-select组件宽度保持一致。

2025-02-08 14:37:05 801

原创 websocket使用

WebSocket 是一种适用于 Web 浏览器与服务器的全双工通信协议,支持网页实时收发数据,无需刷新页面或采用传统 HTTP 轮询机制,确保浏览器与服务器间连接稳定。该特性使其广泛应用于聊天应用、实时数据监控等领域,为实时交互提供高效解决方案。

2025-02-07 09:39:21 646

原创 解决ElementUI中el-radio使用报错问题:Blocked aria-hidden on an element because its descendant retained focus

查找资料发现:这个警告信息是由于 aria-hidden 属性和焦点管理冲突导致的。在 Element UI 的 el-radio 组件中,标签被设置为 aria-hidden=“true”,但同时其子元素(如 <input>)仍然保留了焦点,这会导致辅助技术(如屏幕阅读器)无法正确识别焦点状态,就会触发此警告。这比aria-hidden="true"更合适,因为它不仅隐藏了元素,还阻止了它们的交互。检查 el-radio 组件或其父元素是否被错误地设置了 aria-hidden=“true”。

2025-02-06 16:58:45 1520

原创 前端实现图片压缩插件(image-compressorionjs)

在Web开发中,图片压缩是一个常见的需求。随着高清图片和多媒体内容的普及,平衡图片质量与文件大小对提升网页加载速度和优化用户体验至关重要。这里我们使用插件进行图片压缩。

2024-12-26 13:53:47 539

原创 vue项目env文件的使用(vue cli2和vue cli3)

在 Vue CLI 2 中,需要安装 dotenv 包来加载和使用环境变量。:首先安装 dotenv 包:在项目的根目录下创建一个 .env 文件,并在其中定义你的环境变量。:现在你可以在代码中使用 process.env.YOUR_ENV_VAR 来访问你在 .env 文件中定义的环境变量。

2024-12-04 11:31:47 777

原创 vue-virtual-scroller插件实现不等高表格虚拟滚动

这是因为vue-virtual-scroller插件使用了超过浏览器理解的js代码,需要转换为旧版es5规范的代码浏览器才能正常执行。对于大量的表格数据加载,如果我们全部加载不仅面临加载等待时间长,容易崩溃的问题,还有可能导致浏览器缓存数据量大而导致页面使用卡顿的情况。在页面中使用,不等高的列表需要使用DynamicScroller+DynamicScrollerItem这种方式。加载来优化这种情况,在这里我们使用插件vue-virtual-scroller来实现虚拟滚动。使用过程中可能存在的问题。

2024-09-02 12:00:17 1754

原创 JS实现高度不等的列表虚拟滚动加载

而为了后续的一些针对列表的操作,例如直接查看第666行的数据,就需要对这行的数据有清楚的定位信息,且确保跳转后再次上下滚动加载不会导致出现问题(白屏情况),所以需要实时更新之前的布局信息以供这种操作。加载成功后就需要设置滚动条,为了后面滚动加载其他的内容,我们使用padding撑开盒子的高度,而padding的值就根据缓存的rowPosList每一元素的布局信息来设置。根据需要加载的开始位置和结束位置,加载虚拟滚动页面的内容,默认加载从第一行开始的数据。,即滚动列表时,动态改变可视区域内的渲染内容。

2024-09-02 10:24:45 839

原创 使用node.forge.js加密传输

很多时候我们与后台的交互数据需要保证安全性,这个时候就需要将传给后台的数据进行加密,这里我们使用node.forge.js进行加密传输。:Node-forge可以在多种环境中使用,包括服务器端(如Node.js)和客户端(如浏览器中的JavaScript)。:Node-forge提供了清晰的接口文档和丰富的示例代码,使得开发者即使没有深厚的加密知识背景也能够快速上手和使用这些加密技术。:例如,它支持公钥和私钥的生成,以及基于这些密钥的加密和签名操作。或者使用 npm i node-forge -s 安装。

2024-05-21 17:24:37 1311

原创 vue-cli2项目中使用scss

首先要搞清楚Sass和Scss的区别:实际上Sass和Scss是同一种东西,Scss是 Sass3 引入新的语法,它们都是css预处理器。:Sass 默认使用“.sass”作为文件扩展名,而 Scss 使用“.scss”作为扩展名。:Sass 最初是以严格的缩进式语法规则来书写,不带大括号和分号,这种方式使得代码更加简洁,但在某些情况下可能不如Scss直观易读;相比之下,Scss的语法允许使用大括号和分号,与常规的 css语法相似,这使得 Scss更容易被 css开发者接受和使用。

2024-05-21 15:42:53 1121

原创 网页微信扫码登录,以及redirect_uri参数错误解决方案

流程:首先是生成二维码,二维码对应的 url 中包含一个回调地址,在用户同意授权之后,将会在你的回调 url 上拼接参数 code 并且跳转,跳转之后前端从 url 中获取 code,调用接口发送给后端,后端用 code 去获取所需要的信息即可二维码效果扫码页码用户授权确认后,会跳转到之前redirect_uri属性写的链接,且带着code值。在跳转之后前端从 url 中获取 code,调用接口发送给后端,后端用 code 去获取所需要的信息即可。

2023-12-22 17:12:52 4565

原创 js排序常用算法

冒泡排序:通过相邻元素的比较和交换,使得每一趟循环都能找到未有序数组的最大值或最小值。

2023-12-22 16:30:04 984

原创 vue/cli3项目兼容ie(转为es5)

因为做的项目会在IE环境下运行的情况,按正常vue支持来说,IE8+应该是支持的,可是ES6写法需要进行兼容,否则项目在IE中无法打开,空白,也报一些 未定义什么的错误。

2023-12-19 14:30:30 1461 1

原创 js常用快捷封装方法utils工具

【代码】js常用快捷封装方法utils工具。

2023-12-19 10:15:00 555

原创 理解js事件循环机制Event Loop(宏任务和微任务)

JavaScrip是单线程的,也就意味着同一时间只能处理一件事,如果其中一件事运行非常耗时,就会阻塞线程,事件循环机制就是解决这件事的

2023-12-18 16:24:14 1164

原创 【vue】解决element-ui的el-select下拉框中因选项内容太长导致容器宽度过长问题

使用el-select下拉组件时,当下拉框中的选项内容很长会自动撑开容器宽度,导致页面效果很不好。如果不想使用组件默认的样式效果(超出的文字隐藏,并且后面添加省略号)属性设置下拉弹出框自定义类型 customDropdown。想使用横向滚动条展示所有内容,可以再加上下面的样式代码。为false:不将下拉弹出框插入至 body 元素。1、首先设置el-select的属性。3、设置下拉框的宽度。

2023-12-07 16:17:09 7774 1

原创 常用的正则表达式(手机号码、邮箱、密码等)

手机号码、邮箱、密码、身份证号码、mac验证、

2023-12-06 18:08:51 1934

原创 git常用命令

初始化仓库,拉取代码,回滚版本

2023-12-06 10:58:39 997

原创 vue+pdf.js预览本地pdf文件(可以复制文本,滚动页码展示)

3、解析pdf,获取pdf所有页数据,使用canvas渲染,并使用TextLayerBuilder创建文本层,可以复制文本信息。在这里就是因为微任务导致,所以我们这里渲染pdf任务可以每次渲染完一页后等待一定时间才执行下一页的渲染,空出时间给主线程。在渲染pdf数据时,当pdf文件很大渲染量很多时,会导致页面卡住,无法执行其他操作;在滚动时当前是第几页的页码同步更新展示:需要在渲染每页pdf时将每页的高度存起来,以及每页滚动的临界值。在滚动时,根据当前滚动距离和每页滚动的临界距离相比较,判断当前是第几页。

2023-12-05 16:26:17 6296 3

原创 以鼠标为中心缩放图片

初始鼠标位置距离图片左侧的left、top和宽高的比例,与图片放大后的比例相同计算方式,主要是知道放大后鼠标的位置和放大前鼠标的位置,相减得到偏移的距离,使用transform:translate移动就行。在这个基础上不管是缩小还是放大,都需要把上一次translate对应坐标的值 - 这次得到的值

2023-12-04 18:13:08 984

原创 js获取图片原始宽高

使用HTML5属性 (naturalWidth, naturalHeight)和Image对象获取图片原始宽高

2023-03-03 14:39:49 1308

原创 js+html2canvas实现网页放大镜效果:放大镜图片使用css样式background背景图,鼠标移动使用样式background-position动态设置

鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化。放大镜限制:放大镜只能在特定的区域内使用,即放大镜的移动范围有边界。

2022-08-31 18:09:45 2278 1

原创 js根据坐标进行图片截图,获取图片上指定位置的截图

js根据坐标进行图片截图

2022-08-26 16:54:12 4099 2

原创 js 复制指定元素内的文本信息到剪切板(navigator.clipboard和document.execCommand)

【代码】js 复制指定元素内的文本信息到剪切板。

2022-08-26 15:41:20 1203

原创 循环使用正则时,属性lastIndex导致输出结果与实际情况不符合

问题复现const reg = /\.png$/igconst arr = ['1.png','2.png', '3.png']arr.forEach(i=>{ console.log('匹配结果:'+reg.test(i))})结果会是这样很明显,和预期的结果不一致,结果应该都是true产生原因在正则表达式使用了表示全局检索的 “g” 标志时,正则的lastIndex属性会记录上一次的匹配字符的index+1(lastIndex),下一次匹配时就会从lastIndex处为

2022-04-02 16:05:56 224

原创 VS code断点调试vue项目代码

1、搜索安装 debugger for chrome 插件2、创建launch.json文件点击运行和测试,或下面的创建文字按钮,选择chrome3、修改launch.json文件 的配置项{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "conf

2022-03-09 15:23:19 2945

原创 js数组去重的方法

js数组去重的方法1、for嵌套for,使用splice删除原数组重复的元素2、indexOf方法去重,返回新数组3、includes方法去重,返回新数组4、利用对象key属性唯一的特性去重4、利用ES6中的Set去重1、for嵌套for,使用splice删除原数组重复的元素 function deleteRepetition(arr){ for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j <

2022-03-02 17:33:42 277

原创 判断一个字符串中出现次数最多的字符,并统计次数

var str = "acfdskffdssfaf"var obj = {}for (let i = 0; i < str.length; i++) { if (obj[str[i]]) { obj[str[i]]++ } else { obj[str[i]] = 1 }}console.log(obj)var maxNum = 0, maxStr = str[0]for (const item in obj) { if (o

2020-08-29 15:14:59 304

原创 Vue如何自定义一个组件

具体步骤如下:1、在compoents文件夹下创建mine文件夹,在其中创建Mine.vue和index.js;2、Mine.vue代码如下:<template> <div> <h3>自定义组件</h3> <p>{{msg}}</p> </div></template><script>export default { name: '

2020-08-09 16:53:19 382

原创 使用swiper.js插件实现简单的动画

1、首先引入css和js文件 <link rel="stylesheet" href="./cssC/swiper-4.5.0.min.css"/> <script type="text/javascript" src="./script/swiper-4.5.0.min.js"></script>2、根据需求编写样式和布局图片css样式: /* 轮播 */ .lunbo{ width: 100%; height:5.7rem;

2020-06-27 23:37:54 364

express+websocket+vue实现简单的对话聊天系统

express+websocket+vue实现简单的聊天对话系统 使用Vue.js作为前端框架,构建用户友好的聊天界面,其中包括消息输入框、发送按钮以及聊天记录显示区域。用户可以通过这个界面轻松地向客服发送消息。同时,利用Express作为后端框架搭建一个稳定的服务器环境,用于处理用户发送的消息请求。为了实现实时通信,使用了WebSocket技术,它使得用户与服务器之间的消息传递变得即时且高效。每当用户发送一条消息,WebSocket都会立即将这条消息传递给服务器,服务器随后将消息转发给相应的客服。客服在收到消息后,可以实时进行回复,回复的内容同样通过WebSocket即时传回给用户。整个聊天过程中,所有的聊天记录都会被精心地保存在系统中,并实时显示在聊天界面上,从而为用户和客服提供了一个完整、流畅的聊天对话流程。

2025-02-17

javascript经典案例.zip

JavaScript,作为前端开发的基石语言,其重要性不言而喻。对于前端开发者而言,熟练掌握JavaScript不仅是基本要求,更是开启技术之旅的钥匙。本文精心整理了一系列经典的JavaScript使用案例,旨在为各位开发者提供宝贵的学习资源和实践指导,助力大家深入掌握这门强大的编程语言,并将其应用于实际项目中,不断提升自己的技术水平。 包括以下使用范例 Ajax请求数据 表单验证 动态引入css、js文件 复制文本信息 滚动到顶部功能 获取图片上指定位置的截图 获取图片原始宽高 计数器 节日倒计时 模态弹裔 时间显示 图片固定点翻转、旋转、拉伸 图片轮播 图片任意点旋转 拖动调整元素宽度 网页上放大镜效果 下拉菜单 虚拟滚动加载不等高列表

2025-02-10

javascript+canvas+vue实现多种模式的图片压缩网站

一个功能全面且用户友好的图片压缩网站,采用JavaScript原生+canvas画布来实现图片的压缩功能,并使用Vue.js来构建页面展示。 该网站提供三种压缩模式:缩小优先、清晰优先和自定义模式,以满足不同用户的需求。 当用户上传图片并选择相应的压缩模式后,系统将自动进行压缩处理。如果压缩成功,用户可以立即下载压缩后的图片;如果压缩失败,系统提供重新压缩的功能,以确保用户能够获得最佳体验。 此外,为了方便用户管理和查询之前的压缩记录,系统还将保存所有压缩历史记录。用户可以随时查看自己的压缩历史,以便回顾和管理已压缩的图片。

2025-02-10

vue+pdf.js预览本地pdf文件(可以复制文本,滚动页码展示)

vue项目 使用pdfjs-dist插件实现预览本地选择的pdf文件,同时可以滑选复制文本内容、视图放大缩小,滚动页码变化等操作; 资源下载下来后按照正常的vue项目安装依赖,启动就可以使用查看

2024-06-06

node-forge.js加解密文件

为了数据的安全性,需要对数据传输进行加密解密 node-forge是一个用于加密和解密的JavaScript库,它支持多种加密算法,如AES、RSA等,还支持公钥和私钥的生成,以及基于这些密钥的加密和签名操作

2024-05-21

20多种常用的正则表达式

常用的几种正则表达式:适用于很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下 主要包含:手机号、邮箱、密码强度、输入内容限制(数字、字母、汉字、正整数、浮点数)、身份证、QQ、微信、URL链接、mac地址等等常见的 不常见的包含:IPv4的校验、16进制颜色、指定日期格式校验、邮政编码、银行卡号、车牌号、UUID

2023-12-07

mysql增删改查常用语句(包含复杂场景)

MySQL作为关系型数据库管理系统中的一种,为数据的增删改查提供了一系列强大而灵活的语句支持。对于初学者而言,掌握这些基础语句是迈向数据库管理世界的第一步;而对于资深的开发者来说,深入了解其在不同场景下的应用也是提升技能的关键。 目录 1、增加内容到表格 insert语句 2、删除表格内容 delete语句 2.1删除满足条件的数据 2.2批量删除满足条件的数据 in() 2.3删除连贯数据 between and 2.4删除所有数据: 3、修改表格内容 update语句 3.1 无条件修改 3.2 有条件修改 4、查询表格内容 select语句 4.1 查询所有字段-星号(*) 4.2 查询指定字段 4.3 where关键字(指走条件) 4.4 where-and/between and(指定范围) 4.5 select和or(满足任一条件) 4.6 where-in(自走义查询范围) 4.7 where-is(查看空值和非空) 4.8 where-字段 like 值%(模糊查询) 4.9 order(排序查询) 4.10 limit(分页查询)

2022-09-13

git常用命令大全.md(包含异常情况的处理)

提供Git在各种场景下的命令代码和相关注意事项,对于开发者而言,是掌握版本控制系统、提升协作效率的关键。以下是在不同场景下使用Git的命令代码示例及相关注意事项: 目录 帐号设置 全局设置 局部设置 初始化仓库 创建一个空的git仓库 与远程仓库建立关联 提交代码命令 添加文件到临时库 把临时库的文件同步到本地仓库 把本地仓库代码提交到远程仓库 版本信息 查看最近提交的版本信息 回滚版本 回滚版本基础上修改并强制提交,丢弃之前的提交记录 基它常用的命令 下载远程仓库代码 在已有的代码上拉取最新的代码 查看文件状态 查看当前分支 修改远程仓库地址 分支操作 切换分支 查看当前是哪个分支 创建分支 删除分支 合并分支 合并某分支的某个commit记录 git下载代码常见异常 缓存区溢出 网络下载速度慢导致超时 ssh异常 OpenSSL SSL read: Connection was reset gitlab服务器示例代码 配置 创建一个新的仓库 提交代码到已经存在的目录 删除tag标签 删除本地tag: 删除远程tag: github里不支持密码push 出现443异常

2021-09-06

前端面试题汇总.doc

事件委托是利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!把本应该添加到某个元素上的事件委托给他的父级,从而减少DOM交互达到网页优化。

2020-06-28

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除