JavaScript
文章平均质量分 53
JavaScript工作&学习-知识点
JackieDYH
阅技术、码经验、勤总结、乐分享、喜交流。
展开
-
阿里云对象存储OSS的前端直传-demo
在项目里有时候会碰到比如上传文件相关的,一般都是后端提供个接口,然后我们上传的时候后端再传到阿里OSS或者其他服务商的对象存储,然后把最终的url拿到存起来或者返回给前端,这种方式其实在上传图片的频率不高的业务场景中可能并无大碍,但是如果你的项目是相册类的,资源提供类的,总之就是有很频繁的上传文件的场景,可能服务器的带宽就有点扛不住了,那么有没有更好的解决方案呢?此时服务端的工作已经完结了,可以提供前端一个接口,通过鉴权之后,返回给前端这么几个参数,接下来,让我们把舞台交给我们的前端~原创 2024-08-26 09:17:12 · 1182 阅读 · 0 评论 -
Vue项目中手搓滑动校验模块-demo
Vue项目中手搓滑动校验模块原创 2024-08-05 10:14:03 · 302 阅读 · 0 评论 -
文件流方式下载大文件,页面会卡,可以开新线程去执行下载
但是,在Web Workers中进行HTTP请求并不会直接解冔主线程卡顿的问题,因为文件下载操作(特别是大文件)通常会受限于网络IO,并且文件数据最终需要在主线程中被处理以实现下载。这种方式允许你在数据块到达时就处理它们,减少内存的使用,并且提高处理大文件的性能。这样,主线程只负责触发下载和处理用户界面交互,而文件的数据处理是逐块进行的,这有利于保持页面的响应性。: 如果后端支持,你可以实现流式下载,边下载边处理文件,而不是等待整个文件下载完成。当所有的数据块都被读取完时,流会被关闭。原创 2024-07-29 09:02:23 · 212 阅读 · 0 评论 -
Vue-Request 帮你方便快捷的管理项目的请求接口
在以往的业务项目中,我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开启一个新项目都需要重新实现一遍,这是一项重复的工作,还需要确保团队的一致性。VueRequest 的目的是为开发人员提供一种方便、快速的方式来管理 API 状态。通过简单的配置,可以省去那些繁琐的任务,专注于业务核心的开发。是一个异步的请求函数,换句话说,你可以使用。当请求完成后,则将会根据请求结果来设定。来获取数据,然后返回一个。原创 2024-07-22 09:00:00 · 610 阅读 · 0 评论 -
Nuxt.js中下载后端返回的文件流格式的文件进行文件下载
如果你的 Nuxt.js 项目已经安装并配置了这个模块,你可以直接使用它来发送请求并下载文件。发送 GET 请求到你的后端 API 端点以获取文件流。然后,使用 JavaScript 创建一个临时的。是你希望保存的文件名和扩展名。在 Nuxt.js 中,你可以使用全局的。确保你的 Nuxt.js 应用已包含。对象来处理 HTTP 请求,这是由。响应头中提取,如果后端设置了的话。方法会在点击按钮时触发。在你的组件或页面中,使用。是你的 API 端点,而。元素来模拟文件下载。原创 2024-07-15 09:56:06 · 238 阅读 · 0 评论 -
HTML-缓动函数-贝萨尔曲线
缓动函数使得动画开始时速度较快,然后逐渐减慢,直至停止。这个简单的demo展示了如何将缓动函数应用于实际的动画效果中,创造出平滑自然的动画过渡效果。函数来实现一个元素的平滑移动动画。这个demo创建了一个按钮,当点击它时,会使页面上的一个元素向右平滑移动。元素会在1秒内向右移动300像素。原创 2024-07-01 09:11:20 · 320 阅读 · 0 评论 -
fetch 封装 文件流下载进度监控-demo
在实际应用中,确保处理各种可能的异常情况,并提供用户反馈。此外,由于 CORS 策略,你可能无法从其他域获取。当读取到新的数据块时,进度回调会被调用,更新下载进度。读取完成后,它将所有数据块合并到一个。如果没有这个头,或者它的值不正确,那么进度指示将无法工作。头,除非其他域的服务器设置了适当的 CORS 头来允许这样做。函数接受一个文件 URL 和一个进度回调函数。API 下载文件并监控下载进度,你需要处理响应的。请注意,进度监控假设服务器发送了正确的。,最终生成一个可以下载的 URL。原创 2024-06-24 09:01:26 · 393 阅读 · 0 评论 -
Nodejs中循坏代码目录,提取代码中中文文本到文件中
Nodejs中循坏代码目录,提取代码中中文文本到文件中。原创 2024-05-30 11:45:57 · 287 阅读 · 0 评论 -
前端使用TradingView与websocket数据推送-demo
前端使用TradingView与websocket数据推送-demo。原创 2024-05-30 11:42:00 · 179 阅读 · 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 · 1289 阅读 · 1 评论 -
axios封装各种请求方式-请求拦截器和响应拦截器
在Vue项目中使用axios时,封装请求方式、请求拦截器和响应拦截器是一个良好的实践。下面是一个简单的axios封装的例子,包括GET、POST、PUT、DELETE请求,以及请求拦截器和响应拦截器。原创 2024-04-22 10:54:08 · 355 阅读 · 0 评论 -
0.01203000、0.01203200、0.01203002 通过js方式将小数末尾无效的0去掉
0.01203000、0.01203200、0.01203002 通过js方式将小数末尾无效的0去掉。原创 2024-04-10 14:16:06 · 507 阅读 · 0 评论 -
Vue上实现上下左右无缝滚动、单步滚动-demo
拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果。singleHeight and singleWidth 是否开启 rem 度量。控制滚动方向,可选值up,down,left,right。通过v-model控制动画滚动与停止,默认开始滚动。开启滚动的数据量,只有列表长度大于等于该值才会滚动。在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启。无缝滚动列表数据,组件内部使用列表长度。动画效果,可以传入贝塞尔曲线数值。动画循环次数,默认无限循环。原创 2024-03-25 11:20:27 · 1616 阅读 · 1 评论 -
html+css+JavaScript实现左右滑动区域添加自定义按钮实现移动
选项可以使滚动动作更平滑,但这并不是在所有浏览器中都支持的。如果需要支持更多浏览器,可能需要使用polyfill或者自定义JavaScript动画来实现平滑滚动效果。要在一个左右可以滑动的容器中添加两个固定位置的按钮(左边一个、右边一个),你可以使用。,以便让按钮相对于该容器定位。这样,按钮就会随着容器一起滚动,但始终保持在容器的两侧。需要为按钮添加JavaScript来处理滚动动作。来定位按钮,同时为这个滑动容器设置。原创 2024-03-11 13:28:34 · 1232 阅读 · 0 评论 -
Web端使用Lottie渲染AE导出的json动画-lottie-web-demo
创建LottieAni文件。原创 2024-03-11 13:28:11 · 1884 阅读 · 0 评论 -
HTML+JavaScript实现随机点名|随机抽奖效果-demo
HTML+JavaScript实现随机点名|随机抽奖效果-demo。原创 2024-03-04 10:21:38 · 1111 阅读 · 0 评论 -
Vue中使用element-UI的el-date-picker-修改弹出窗样式
因为el的时间选择器弹出窗是挂载在body中的,并不是在元素下面挂载,所以需要使用提供的popper-class去选择修改样式。原创 2024-02-18 09:34:52 · 1060 阅读 · 0 评论 -
Vue中使用elementUI的DatePicker-IOS移动端会有表单t聚焦时页面放大效果-解决办法
可以像 width=600 这样设为确切的像素数,或者设为 device-width 特殊值,代表缩放为 100% 时以 CSS 像素计量的屏幕宽度。相应的也有 height 及 device-height 属性,可能对包含基于视口高度调整大小及位置的元素的页面有用。是可以看到 Web 内容的窗口区域,通常与渲染出的页面的大小不同,这种情况下,浏览器会提供滚动条以滚动访问所有内容。属性控制页面最初加载时的缩放等级,即当页面第一次 load 的时候缩放比例。属性控制允许用户缩放到的最小比例。原创 2024-01-29 10:23:20 · 573 阅读 · 0 评论 -
web中监听页面的显示和隐藏状态-visibilitychange
事件来检测页面的显示和隐藏状态。这个事件会在用户切换到其他标签页、最小化浏览器窗口或切换到其他应用程序时触发。通过监听这个事件,你可以执行一些相应的操作,例如暂停动画、减少定时器的频率等,以提高性能和用户体验。事件在大多数现代浏览器中都有良好的支持,但在一些较旧的浏览器中可能不支持。因此,在使用之前,最好检查浏览器的兼容性。例子中,当页面被隐藏时(用户切换到其他标签页或最小化浏览器窗口),,并触发相应的操作。以下是一个简单的示例,演示如何使用。在Web开发中,可以使用。,同样会触发相应的操作。原创 2024-01-29 10:22:50 · 692 阅读 · 0 评论 -
vue3使用css变量实现主题切换-黑白切换
vue3使用css变量实现主题切换-黑白切换原创 2024-01-18 15:32:13 · 600 阅读 · 0 评论 -
aws-S3上传文件配置-uploadS3.js
aws-S3上传文件配置-uploadS3.js。原创 2024-01-18 15:31:46 · 510 阅读 · 0 评论 -
Vue如何实现获取可视范围内的数据
通过使用 Intersection Observer API,你可以动态地观察元素是否在视口内,并根据需要更新相关的数据。在 Vue 中,要获取可视范围内的数据,你可以使用 Intersection Observer API 来观察元素是否在视口内,并根据需要更新数据。当目标元素进入视口时,会触发回调函数,我们可以在回调函数中更新数据或执行其他操作。当目标元素进入或离开视口时,你可以在回调函数中执行相应的逻辑来更新数据或执行其他操作。引用元素,你需要给目标元素添加。首先,你可以在 Vue 组件的。原创 2024-01-18 15:29:20 · 646 阅读 · 0 评论 -
Vue中使用JavaScript中的requestAnimationFrame动画循环实现循环滚动效果-demo
requestAnimationFrame是一个由浏览器提供的 JavaScript 方法,用于在下一次浏览器重绘之前执行指定的回调函数。它接受一个回调函数作为参数,并返回一个整数值,可以用于取消动画循环。使用 requestAnimationFrame 可以创建平滑的动画效果,并且能够有效地控制动画的帧率,以适应不同的设备和浏览器性能。原创 2024-01-01 21:38:36 · 1279 阅读 · 0 评论 -
JavaScript实现邮箱账户脱敏-demo
脱敏的目的是保护用户隐私,一种常见的方式是显示部分字符,用星号或其他字符替代。原创 2023-12-27 16:54:47 · 738 阅读 · 0 评论 -
JavaScript实现对数据保留有效的小数位数,去除尾部无用的0,并统计小数有多少位-不要再一味的使用toFixed去保留小数位数了-demo
实现原理主要使用 +Number(amount).toFixed(8) 类似这样,先保留小数位数,再进行转换成数字类型去除尾部无用的0。原创 2023-12-25 10:45:11 · 625 阅读 · 0 评论 -
clipboard.js实现复制和粘贴
注意,使用clipboard.js库无法直接从剪贴板粘贴文本,但是你可以通过其他方式来获取粘贴的文本,比如监听。请确保在使用Clipboard API或者clipboard.js之前,你的浏览器支持相关功能。使用clipboard.js库。事件或者使用其他第三方库。原创 2023-12-18 10:54:05 · 232 阅读 · 0 评论 -
移动端调试log-vconsole
移动端调试log-vconsole。原创 2023-12-15 15:12:37 · 63 阅读 · 0 评论 -
交易所里买入卖出中开仓平仓状态判断
LONG 多 SHORT 空。* BUY 买 SELL 卖。* 买多:开仓 卖多:平仓。* 卖空:开仓 买空:平仓。原创 2023-12-04 10:19:23 · 96 阅读 · 0 评论 -
JavaScript解决精度问题-math.js-使用入门
JavaScript 浮点数运算结果不对,因浮点数的存储问题导致计算结果不对。原创 2024-05-07 11:38:15 · 179 阅读 · 0 评论 -
Vue项目中如何获取浏览器唯一标识Fingerprint2-浏览器指纹获取-demo
Vue项目中如何获取浏览器唯一标识Fingerprint2-浏览器指纹获取-demo。原创 2023-11-20 09:48:26 · 1065 阅读 · 0 评论 -
JavaScript实现将Map数据key:value数据转换成数组对象格式
JavaScript实现将Map数据key:value数据转换成数组对象格式。原创 2024-05-13 10:29:23 · 287 阅读 · 0 评论 -
vue项目实现当用户用手机打开web端项目跳转到移动端的域名,反之跳转到移动端域名
实现当用户用手机打开web端项目时跳转到移动端的域名,反之跳转到web端域名,你可以使用JavaScript来检测用户的设备类型,并根据设备类型进行跳转。来获取用户的User-Agent信息,然后通过正则表达式判断是否是手机设备。标签中,或者在一个单独的JavaScript文件中,并在需要的页面中引入。这样当用户打开你的项目时,会根据设备类型自动跳转到对应的域名。将页面重定向到移动端的域名,否则重定向到web端的域名。可以将上述代码放在你的项目中适当的位置,例如在页面的。替换为你实际使用的域名。原创 2024-05-20 11:15:25 · 155 阅读 · 0 评论 -
JavaScript实现输入一个时间戳判断距离当前多久,返回几分钟、几小时等-案例
JavaScript实现输入一个时间戳判断距离当前多久,返回几分钟、几小时等-案例。原创 2023-10-30 11:04:16 · 485 阅读 · 0 评论 -
[{data:{data:[{}]},{data:{data:[{}]}] JS解构赋值拿到内层的data数据
我们使用解构赋值将数组中的第一个对象赋值给 。在上述代码中,我们有一个包含两个对象的数组 。然后,我们再次使用解构赋值,将 。这样,我们就可以分别访问内层的 。 属性的值也是一个包含对象的数组。要使用解构赋值获取内层的 。请注意,上述示例假设数组 。,将第二个对象赋值给 。 中的每个对象都包含 。原创 2023-10-27 11:37:09 · 207 阅读 · 0 评论 -
vue中动态出来返回的时间秒数,在多少范围显示多少秒,多少范围显示分,小时等等
在Vue中,你可以使用计算属性(computed property)或过滤器(filter)来根据动态返回的时间秒数来显示不同的时间单位,比如秒、分、小时等等。在上面的代码中,我们定义了一个计算属性。小于86400,返回小时;的值来返回相应的时间单位。小于3600,返回分;小于60,返回秒;,它接受一个参数。原创 2024-01-04 15:08:15 · 670 阅读 · 0 评论 -
JavaScript处理数组数据-数据匹配-剔除
循环上面数组 并把titleData中的每一项和下面这个数组中每一项进行对比,单prop相等时,将下面的匹配项覆盖到上面对应的位置。原创 2023-10-24 07:00:00 · 667 阅读 · 0 评论 -
Vue项目中使用Multiavatarjs生成自定义随机头像-demo
前者使用简单一点提供的有api,后者更类似一个项目主要使用Multiavatar去实现随机生成头像的功能使用很简单,把js下载保存到项目中,然后在html文件引入,即可全局使用。原创 2023-10-23 07:00:00 · 1741 阅读 · 7 评论 -
Vue中巧用computed配合watch实现监听多个属性的变化
但需要同时监听多个值的变化时,原始操作是通过去对每个属性进行监听,因为watch可以监听计算属性computed,可以通过computed把所有要监听的数据,再去监听该对象需要监听的数据逐个写,这样重复的代码很多,这里想要实现的功能是,数据改变了,比对name1和name2是否一致,原创 2023-10-12 10:51:52 · 925 阅读 · 0 评论 -
JS将两个数组中的数据合并到一个数组中[[],[]]
将[ 1582848000000, 1582934400000, 1583020800000, 1583107200000, 1583193600000 ]和[806730620, 806730620, 806730620, 806730620, 806730620]的长度相同,并且对应的索引位置上的元素是一一对应的。如果两个数组的长度不一致,或者对应的索引位置上的元素不一致,结果可能会不符合预期。数组,并将每个时间戳和对应的数据组合成一个新的数组。方法将两个数组按照指定的格式进行组合。原创 2024-06-03 07:32:59 · 385 阅读 · 0 评论 -
echarts中api返回数据的结构是时间和数据是两个数组返回的如何使用
如果ECharts的API返回的数据结构是时间和数据分别作为两个数组返回的,你可以将这两个数组分别赋值给x轴和y轴的数据。数组赋值给y轴的数据。这样,你就可以在图表中显示时间和对应的数据了。确保将这些配置包含在传递给ECharts实例的。数组赋值给x轴的数据,使用了。在这个示例中,我们使用了。原创 2024-06-03 07:32:30 · 251 阅读 · 0 评论