
JavaScript
文章平均质量分 51
JavaScript工作&学习-知识点
JackieDYH
阅技术、码经验、勤总结、乐分享、喜交流。
展开
-
使用HTML+JavaScript生成一个贪吃蛇游戏-demo
使用HTML+JavaScript生成一个贪吃蛇游戏-demo。原创 2025-03-17 14:00:20 · 198 阅读 · 0 评论 -
HTML+JavaScript实现随机点名2.0|随机抽奖效果-demo
HTML+JavaScript实现随机点名2.0|随机抽奖效果-demo。原创 2025-03-10 09:37:09 · 372 阅读 · 0 评论 -
JavaScript 判断对象里是否存在某个key-案例
在JavaScript中,你可以使用多种方法来判断一个对象中是否存在某个特定的键(例如。方法返回一个包含对象自身所有可枚举属性的数组,然后你可以检查该数组中是否包含指定的键。选择哪种方法取决于你的具体需求。如果你只需要检查对象自身的属性,方法仅检查对象自身是否包含指定的属性,不包括原型链上的属性。如果你需要检查包括原型链上的属性,可以使用。:可选链操作符可以简化属性访问,并且在属性不存在时返回。运算符可以检查对象自身及其原型链上是否存在指定的属性。:这种方法可以避免对象自身定义了。原创 2025-01-20 09:56:32 · 281 阅读 · 0 评论 -
url encode 编码转换
编码:使用对字符串进行编码。解码:使用对编码后的字符串进行解码。是用于编码 URI 组件的 JavaScript 函数。它会将字符串中的某些字符替换为一个或多个由百分号(%)后跟两位十六进制数字表示的字符,以确保字符串可以在 URI 中安全传输。要将编码过的字符串转换回来,可以使用函数。这个函数会将这些百分号编码的字符还原为原来的字符。');所以,如果你有一个被编码过的字符串,你可以使用来解码它。原创 2024-12-30 09:04:16 · 1030 阅读 · 0 评论 -
Vue中使用wangeditor/editor富文本编辑器
Vue中使用wangeditor/editor富文本编辑器。原创 2024-12-16 14:35:38 · 1892 阅读 · 0 评论 -
JavaScript将数组[[XXXX,XXXX],[XXXX],XXXX]处理成一维数组
JavaScript将数组[[XXXX,XXXX],[XXXX],XXXX]处理成一维数组。原创 2024-11-26 09:05:06 · 147 阅读 · 0 评论 -
Vue中使用Antd中a-table实现表格数据列合并展示
根据需求实现当前两列数据中有相同数据时,合并列单元格。原创 2024-11-05 09:18:29 · 506 阅读 · 0 评论 -
JavaScript生成指定大小的方形缩略图
JavaScript生成指定大小的方形缩略图。原创 2024-10-28 09:09:36 · 249 阅读 · 0 评论 -
js实现数组中数据有则删除无则添加-[‘12123‘,‘432233‘...]
可以使用Array.prototype.includes()方法来判断数组中是否存在指定元素,然后使用Array.prototype.splice()方法来删除或添加元素。方法来判断数组中是否存在某个元素,如果存在则使用。方法删除该元素,如果不存在则使用。原创 2024-10-22 15:38:55 · 439 阅读 · 0 评论 -
axios图片上传elementui图片上传组件如何使用
首先需要安装axios和element-ui依赖:npm install axios element-ui --save。注意:上传文件时需要设置Content-Type为multipart/form-data。原创 2024-10-24 08:00:00 · 340 阅读 · 0 评论 -
Vue中app.config.globalProperties&Vue.prototype和getCurrentInstance的使用
在Vue 3中,我们可以使用 app.config.globalProperties 来定义全局的属性和方法。这个属性和Vue 2中的 Vue.prototype 类似,但是在某些方面有所不同。以下是Vue3中 app.config.globalProperties 和Vue2中的 Vue.prototype 的对比:1、异步行为不同Vue 3中是异步创建组件实例并挂载DOM,所以在 app.config.globalProperties 定义的方法中使用异步方法会更加安全。原创 2024-10-21 15:09:18 · 622 阅读 · 0 评论 -
文件导出和下载封装download-案例
download.excel(data, '列表.xls')原创 2024-09-30 15:18:09 · 244 阅读 · 0 评论 -
CryptoJS AES对称 JSEncrypt RSA非对称-使用封装
AES对称加密我们采用 CryptoJS,AES加密支持AES-128、AES-192和AES-256 https://github.com/brix/crypto-jsRSA非对称加密我们采用JSEncrypt https://github.com/travist/jsencrypt。原创 2024-09-30 15:17:43 · 491 阅读 · 0 评论 -
阿里云对象存储OSS的前端直传-demo
在项目里有时候会碰到比如上传文件相关的,一般都是后端提供个接口,然后我们上传的时候后端再传到阿里OSS或者其他服务商的对象存储,然后把最终的url拿到存起来或者返回给前端,这种方式其实在上传图片的频率不高的业务场景中可能并无大碍,但是如果你的项目是相册类的,资源提供类的,总之就是有很频繁的上传文件的场景,可能服务器的带宽就有点扛不住了,那么有没有更好的解决方案呢?此时服务端的工作已经完结了,可以提供前端一个接口,通过鉴权之后,返回给前端这么几个参数,接下来,让我们把舞台交给我们的前端~原创 2024-08-26 09:17:12 · 1668 阅读 · 0 评论 -
Vue项目中手搓滑动校验模块-demo
Vue项目中手搓滑动校验模块原创 2024-08-05 10:14:03 · 351 阅读 · 0 评论 -
文件流方式下载大文件,页面会卡,可以开新线程去执行下载
但是,在Web Workers中进行HTTP请求并不会直接解冔主线程卡顿的问题,因为文件下载操作(特别是大文件)通常会受限于网络IO,并且文件数据最终需要在主线程中被处理以实现下载。这种方式允许你在数据块到达时就处理它们,减少内存的使用,并且提高处理大文件的性能。这样,主线程只负责触发下载和处理用户界面交互,而文件的数据处理是逐块进行的,这有利于保持页面的响应性。: 如果后端支持,你可以实现流式下载,边下载边处理文件,而不是等待整个文件下载完成。当所有的数据块都被读取完时,流会被关闭。原创 2024-07-29 09:02:23 · 416 阅读 · 0 评论 -
Vue-Request 帮你方便快捷的管理项目的请求接口
在以往的业务项目中,我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开启一个新项目都需要重新实现一遍,这是一项重复的工作,还需要确保团队的一致性。VueRequest 的目的是为开发人员提供一种方便、快速的方式来管理 API 状态。通过简单的配置,可以省去那些繁琐的任务,专注于业务核心的开发。是一个异步的请求函数,换句话说,你可以使用。当请求完成后,则将会根据请求结果来设定。来获取数据,然后返回一个。原创 2024-07-22 09:00:00 · 759 阅读 · 0 评论 -
Nuxt.js中下载后端返回的文件流格式的文件进行文件下载
如果你的 Nuxt.js 项目已经安装并配置了这个模块,你可以直接使用它来发送请求并下载文件。发送 GET 请求到你的后端 API 端点以获取文件流。然后,使用 JavaScript 创建一个临时的。是你希望保存的文件名和扩展名。在 Nuxt.js 中,你可以使用全局的。确保你的 Nuxt.js 应用已包含。对象来处理 HTTP 请求,这是由。响应头中提取,如果后端设置了的话。方法会在点击按钮时触发。在你的组件或页面中,使用。是你的 API 端点,而。元素来模拟文件下载。原创 2024-07-15 09:56:06 · 376 阅读 · 0 评论 -
HTML-缓动函数-贝萨尔曲线
缓动函数使得动画开始时速度较快,然后逐渐减慢,直至停止。这个简单的demo展示了如何将缓动函数应用于实际的动画效果中,创造出平滑自然的动画过渡效果。函数来实现一个元素的平滑移动动画。这个demo创建了一个按钮,当点击它时,会使页面上的一个元素向右平滑移动。元素会在1秒内向右移动300像素。原创 2024-07-01 09:11:20 · 379 阅读 · 0 评论 -
fetch 封装 文件流下载进度监控-demo
在实际应用中,确保处理各种可能的异常情况,并提供用户反馈。此外,由于 CORS 策略,你可能无法从其他域获取。当读取到新的数据块时,进度回调会被调用,更新下载进度。读取完成后,它将所有数据块合并到一个。如果没有这个头,或者它的值不正确,那么进度指示将无法工作。头,除非其他域的服务器设置了适当的 CORS 头来允许这样做。函数接受一个文件 URL 和一个进度回调函数。API 下载文件并监控下载进度,你需要处理响应的。请注意,进度监控假设服务器发送了正确的。,最终生成一个可以下载的 URL。原创 2024-06-24 09:01:26 · 502 阅读 · 0 评论 -
Nodejs中循坏代码目录,提取代码中中文文本到文件中
Nodejs中循坏代码目录,提取代码中中文文本到文件中。原创 2024-05-30 11:45:57 · 340 阅读 · 0 评论 -
前端使用TradingView与websocket数据推送-demo
前端使用TradingView与websocket数据推送-demo。原创 2024-05-30 11:42:00 · 410 阅读 · 0 评论 -
Vue2和Vue3中使用WebSocker-封装
在Vue.js中实现WebSocket的封装通常需要创建一个单独的模块或插件,以便在整个应用中使用WebSocket。下面是一个简单的例子,演示如何在Vue.js中封装WebSocket:首先,你可以创建一个名为例子中,我们创建了一个WebSocket实例,并在Vue插件中定义了一些生命周期事件的处理程序。我们使用Vue的$emit方法将收到的消息传递给Vue组件。然后,在Vue应用的入口文件(通常是main.js现在,在Vue组件中,你可以通过来访问WebSocket实例。原创 2024-05-20 11:15:53 · 1697 阅读 · 2 评论 -
axios封装各种请求方式-请求拦截器和响应拦截器
在Vue项目中使用axios时,封装请求方式、请求拦截器和响应拦截器是一个良好的实践。下面是一个简单的axios封装的例子,包括GET、POST、PUT、DELETE请求,以及请求拦截器和响应拦截器。原创 2024-04-22 10:54:08 · 452 阅读 · 0 评论 -
0.01203000、0.01203200、0.01203002 通过js方式将小数末尾无效的0去掉
0.01203000、0.01203200、0.01203002 通过js方式将小数末尾无效的0去掉。原创 2024-04-10 14:16:06 · 685 阅读 · 0 评论 -
Vue上实现上下左右无缝滚动、单步滚动-demo
拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果。singleHeight and singleWidth 是否开启 rem 度量。控制滚动方向,可选值up,down,left,right。通过v-model控制动画滚动与停止,默认开始滚动。开启滚动的数据量,只有列表长度大于等于该值才会滚动。在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启。无缝滚动列表数据,组件内部使用列表长度。动画效果,可以传入贝塞尔曲线数值。动画循环次数,默认无限循环。原创 2024-03-25 11:20:27 · 1717 阅读 · 1 评论 -
html+css+JavaScript实现左右滑动区域添加自定义按钮实现移动
选项可以使滚动动作更平滑,但这并不是在所有浏览器中都支持的。如果需要支持更多浏览器,可能需要使用polyfill或者自定义JavaScript动画来实现平滑滚动效果。要在一个左右可以滑动的容器中添加两个固定位置的按钮(左边一个、右边一个),你可以使用。,以便让按钮相对于该容器定位。这样,按钮就会随着容器一起滚动,但始终保持在容器的两侧。需要为按钮添加JavaScript来处理滚动动作。来定位按钮,同时为这个滑动容器设置。原创 2024-03-11 13:28:34 · 1519 阅读 · 0 评论 -
Web端使用Lottie渲染AE导出的json动画-lottie-web-demo
创建LottieAni文件。原创 2024-03-11 13:28:11 · 2115 阅读 · 0 评论 -
HTML+JavaScript实现随机点名|随机抽奖效果-demo
HTML+JavaScript实现随机点名|随机抽奖效果-demo。原创 2024-03-04 10:21:38 · 1348 阅读 · 0 评论 -
Vue中使用element-UI的el-date-picker-修改弹出窗样式
因为el的时间选择器弹出窗是挂载在body中的,并不是在元素下面挂载,所以需要使用提供的popper-class去选择修改样式。原创 2024-02-18 09:34:52 · 1423 阅读 · 0 评论 -
Vue中使用elementUI的DatePicker-IOS移动端会有表单t聚焦时页面放大效果-解决办法
可以像 width=600 这样设为确切的像素数,或者设为 device-width 特殊值,代表缩放为 100% 时以 CSS 像素计量的屏幕宽度。相应的也有 height 及 device-height 属性,可能对包含基于视口高度调整大小及位置的元素的页面有用。是可以看到 Web 内容的窗口区域,通常与渲染出的页面的大小不同,这种情况下,浏览器会提供滚动条以滚动访问所有内容。属性控制页面最初加载时的缩放等级,即当页面第一次 load 的时候缩放比例。属性控制允许用户缩放到的最小比例。原创 2024-01-29 10:23:20 · 657 阅读 · 0 评论 -
web中监听页面的显示和隐藏状态-visibilitychange
事件来检测页面的显示和隐藏状态。这个事件会在用户切换到其他标签页、最小化浏览器窗口或切换到其他应用程序时触发。通过监听这个事件,你可以执行一些相应的操作,例如暂停动画、减少定时器的频率等,以提高性能和用户体验。事件在大多数现代浏览器中都有良好的支持,但在一些较旧的浏览器中可能不支持。因此,在使用之前,最好检查浏览器的兼容性。例子中,当页面被隐藏时(用户切换到其他标签页或最小化浏览器窗口),,并触发相应的操作。以下是一个简单的示例,演示如何使用。在Web开发中,可以使用。,同样会触发相应的操作。原创 2024-01-29 10:22:50 · 1329 阅读 · 1 评论 -
vue3使用css变量实现主题切换-黑白切换
vue3使用css变量实现主题切换-黑白切换原创 2024-01-18 15:32:13 · 705 阅读 · 0 评论 -
aws-S3上传文件配置-uploadS3.js
aws-S3上传文件配置-uploadS3.js。原创 2024-01-18 15:31:46 · 605 阅读 · 0 评论 -
Vue如何实现获取可视范围内的数据
通过使用 Intersection Observer API,你可以动态地观察元素是否在视口内,并根据需要更新相关的数据。在 Vue 中,要获取可视范围内的数据,你可以使用 Intersection Observer API 来观察元素是否在视口内,并根据需要更新数据。当目标元素进入视口时,会触发回调函数,我们可以在回调函数中更新数据或执行其他操作。当目标元素进入或离开视口时,你可以在回调函数中执行相应的逻辑来更新数据或执行其他操作。引用元素,你需要给目标元素添加。首先,你可以在 Vue 组件的。原创 2024-01-18 15:29:20 · 766 阅读 · 0 评论 -
Vue中使用JavaScript中的requestAnimationFrame动画循环实现循环滚动效果-demo
requestAnimationFrame是一个由浏览器提供的 JavaScript 方法,用于在下一次浏览器重绘之前执行指定的回调函数。它接受一个回调函数作为参数,并返回一个整数值,可以用于取消动画循环。使用 requestAnimationFrame 可以创建平滑的动画效果,并且能够有效地控制动画的帧率,以适应不同的设备和浏览器性能。原创 2024-01-01 21:38:36 · 1685 阅读 · 0 评论 -
JavaScript实现邮箱账户脱敏-demo
脱敏的目的是保护用户隐私,一种常见的方式是显示部分字符,用星号或其他字符替代。原创 2023-12-27 16:54:47 · 2841 阅读 · 0 评论 -
JavaScript实现对数据保留有效的小数位数,去除尾部无用的0,并统计小数有多少位-不要再一味的使用toFixed去保留小数位数了-demo
实现原理主要使用 +Number(amount).toFixed(8) 类似这样,先保留小数位数,再进行转换成数字类型去除尾部无用的0。原创 2023-12-25 10:45:11 · 795 阅读 · 0 评论 -
clipboard.js实现复制和粘贴
注意,使用clipboard.js库无法直接从剪贴板粘贴文本,但是你可以通过其他方式来获取粘贴的文本,比如监听。请确保在使用Clipboard API或者clipboard.js之前,你的浏览器支持相关功能。使用clipboard.js库。事件或者使用其他第三方库。原创 2023-12-18 10:54:05 · 350 阅读 · 0 评论 -
移动端调试log-vconsole
移动端调试log-vconsole。原创 2023-12-15 15:12:37 · 92 阅读 · 0 评论