
demo
文章平均质量分 55
陆康永
是时候开始明确自己写博客是为了什么,以前搞不懂,感觉挺浪费时间的,而且自己的水平写出了的博客可参考价值也不大,权当给以后的自己一个了解过去自己的机会,避免继续踩坑。
展开
-
网页打开摄像头录制视频,下载和上传,支持手机端,视频压缩
也可以配置视频分辨率来压缩,这不一定可以拿到完全一致的分辨率,设备不一样结果不一样(会尽可能的接近,所以改小是有用的),但是分辨率过小时候(视频也会变模糊),改分辨率后可以看到同样20s情况下文件变小了,如何看保存的分辨率有没有变,可以用这个网站直接在线看。直接使用上面的代码生成的文件可以会略大,可以修改帧率来降低文件大小,这不会影响清晰度,只会“掉帧”,压的严重可能会卡卡,参考。向下兼容,如果不支持上面的api只能使用input标签调用原生的摄像头,然后上传前判断下长度和文件大小。原创 2024-07-03 15:05:34 · 568 阅读 · 0 评论 -
提高树结构访问效率
新增辅助数据,用数组替代树结构访问,不修改原来的树结构。树节点嵌套非常深的时候,想要直接访问某个节点非常困难。原创 2024-06-20 11:50:29 · 316 阅读 · 0 评论 -
await-to-js,promise错误拦截
今天介绍一个 npm 包 ——。它可以有效地帮助我们写出健壮的异步逻辑,降低异步编写成本。众所周知,Promise 是 es6 当中一个非常方便的流程控制对象,大大简化了异步逻辑的编写。我们可以使用await来让异步代码像同步代码一样写将异步的逻辑用近似同步的语法表达了出来,连回调都消失了,更加清晰易读,这是件很棒的事情。原创 2024-06-14 15:38:26 · 521 阅读 · 0 评论 -
九宫格转圈圈抽奖活动,有加速,减速效果
一个九宫格抽奖demo,复制就可以跑,都不用改原创 2024-05-23 17:00:32 · 478 阅读 · 0 评论 -
es6 class给私有集合_options里面的所有属性添加get,可以直接访问obj.xx下面的属性,而不需要obj.options.xx
在这个例子中,BaseWithOptions类有一个_options属性和一个,后者接受一个options对象作为参数。类还包含一个静态方法,该方法遍历_options对象的属性,并为每个属性在实例上定义一个getter。当的子类(如Stuff)被实例化时,会调用来调用基类的构造函数,并在此过程中设置getter。因此,子类的实例可以直接访问options对象中的属性。原创 2024-05-09 09:41:40 · 307 阅读 · 0 评论 -
element plus el-date-picker type=“datetime“ 限制年月日 时分秒选择
是不是小时就是disabled-hours,依此类推其他就是disabled-minutes。上面的时间组件很明显和el-time-picker一样,我是这样猜到的,那小时,分钟,秒呢?它提供的disabled-date给我们来限制日期选择。原创 2024-04-18 11:35:50 · 1252 阅读 · 1 评论 -
react setState调用为什么会触发整个组件函数的重新运行
这里的index申明是否可以省略呢,其实也可以,但是这样就得手动给App函数添加index属性,Function是Object的实现,所以它也可以有自己的属性。上面代码里面的index每次调用的时候都会递增,那setState调用时候会触发App的调用那index不是还是会继续递增么?setAge执行会导致App函数重新执行,但是age还是保存之前的结果!然后setState的执行会触发执行它的函数的重新运行,这个怎么写呢?这样无法做到index和我们useState的调用顺序保持一致!原创 2024-01-07 10:59:43 · 770 阅读 · 0 评论 -
js如何判断一个字符串是否为json格式
以上try/catch的确实不能完全检验一个字符串是JSON。原创 2023-12-27 22:56:00 · 2216 阅读 · 0 评论 -
es6字符串模板之标签化模板
我们经常搞前端开发工作的都会用到。它可以保留字符串换行格式,还能接受变量。这个给前端的字符串拼接带来了非常大的方便。但是还有一种用法可能是我们平时还是没有怎么用到的。原创 2023-11-26 23:07:30 · 1553 阅读 · 0 评论 -
Vue3 让localstorage变响应式
原生的window.localStorage.setItem肯定无法实现数据响应式所以需要从写改函数。通过window.localStorage.setItem可以更改本地存储是,还可以更新aa的值。通过aa.value++;既可以更改js的数据修改试图,还有更新本地存储。,需用用到watch来监听数据的变化。此外,还需要对默认参数进行判断,支持数组,对象,和普通类型数据。在组件销毁前也需要移除依赖收集。对于上面2个需求的代码实现都。区分对象类型和普通类型。原创 2023-08-01 00:33:28 · 1164 阅读 · 0 评论 -
js 在浏览器窗口关闭后还可以不中断网络请求
有个需求,我们需要在用户发送数据过程中,如果用户关闭了网页(包括整个浏览器关闭),不要中断数据传递为了测试效果我们用nodejs写了个http服务器代码 文件名为httpServer.js如下,执行node httpServer.js就可以跑起来,支持get,post携带数据。原创 2023-07-23 20:52:58 · 1585 阅读 · 0 评论 -
浏览器通过js打开文件,新建文件,静默实时保存文件
这个api不支持在iframe中运行,所以下面的例子无法 新建,保存,打开新建文件后,可以直接保存文件,不需要再次下载文件,也只有第一次保存时候才会出现确认弹窗。原创 2023-07-07 15:40:28 · 789 阅读 · 2 评论 -
electron mac 复制黏贴失败
mac上面无法复制黏贴,这个需要给他添加菜单,才可以解决。用的是"electron": "^23.2.0"在main/index.js下面添加如下内容。然后软件就多了一个下拉菜单。原创 2023-06-26 13:58:57 · 1143 阅读 · 0 评论 -
给 JavaScript 插上多线程的翅膀 —— Web Worker 的 Promise 化实践
众所周知,JavaScript 这门语言的一大特点就是单线程,即同一时间只能同步处理一件事情,这也是这门语言衍生出的 nodeJS 被各后端大佬诟病的很重要的一点。然而,JavaScript 在设计之初,其实是故意被设计成单线程语言的,这是由于它当时的主要用途决定的。转载 2023-06-21 18:16:21 · 799 阅读 · 0 评论 -
js 数组 根据索引。2个元素互换位置
这里“arr.splice(currentindex,1,arr[targetindex])”只影响了一个,所以拿【0】array.splice返回的是一个数组,这个数组是被影响到的原来数组的元素,原创 2023-03-02 15:56:23 · 889 阅读 · 0 评论 -
同源页面间的跨页面通信之BroadCast Channel
可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时,其中某一个页面通过它发送的消息就会被其他所有页面收到。通过LocalStorage存储内容,并且在改变某个tab页面后,另外一个tab页面监听变动这种方式应该大家都比较熟悉了。这时候浏览器的广播就有用了,安卓软件,ios软件也有同样类同的功能,这里专注浏览器的自带的广播功能。当其他同源页面的不同tab执行如下代码时候就会出发上面的事件监听回调函数的执行。但是这种还是和存储有管理,如果单纯是用来夸tab通讯,而不是需要存储呢?原创 2023-02-16 00:36:05 · 787 阅读 · 0 评论 -
js实现dom拖拽旋转
今天给大家分享一下如何用js实现拖拽旋转拉伸。话不多说,咱们直入主题。使用到的知识点css3:transform浏览器事件: 鼠标事件数学:三角函数原创 2023-01-06 18:57:30 · 1685 阅读 · 1 评论 -
浏览器事件循环探讨 event loop
setTimeout,Promise.resolve(1).then他们都是往底层的任务队列里面添加个函数元素而已。只是微任务的执行优先于宏任务原创 2022-12-08 11:18:06 · 789 阅读 · 0 评论 -
周期活动计算,三天一次活动
他算的不是完整的天数,不是不够一天算一天的那种,而是按照24小时有多少个时间戳,这个24小时是从开始时间算起来的,如果是20点开始,这个24小时就是20点开始算的。原创 2022-11-30 21:25:44 · 985 阅读 · 0 评论 -
js 对象类型数组使用reduce去重
那如果是对象数组了(元素为对象的数组),遍历?有没有可能一个语句解决?回调函数第一个参数cur是上一次遍历执行回调函数返回了的cur元素。如果不传递第二个参数,默认第一次为undefined。基础类型对象去重我们都会,set转一下就可以了。第一遍历的时候是第二个参数[]答案是 reduce。原创 2022-11-30 21:17:12 · 950 阅读 · 0 评论 -
通过时间戳,计算距离下一个周二和周六的时间距离
_—、,我竟然不知道。但是getHours()方法拿到的是电脑本地的时间。时间戳是世界时间,通过它计算小时会比东八区少8个小时,得加8才是北京时间;踩了个坑,记录下避免下次忘记。原创 2022-11-21 21:43:58 · 1475 阅读 · 0 评论 -
js 死循环代码debug
嗯,那如果抽离这个检测死循环的代码到独立函数,且让有while的程序自己调用,是否就可以一定层度的减少心智压力以及更好的debug呢?首先,我们需要得到运行函数的名字,js并没有提供这样的功能,但是函数的arguments.callee却可以拿到整个函数内容的文本。在检测到有死循环的时候,主动中断程序,并报告当前的死循环的程序的函数的名字。这里的捕获是在不影响原代码的情况下,可以监听到死循环,并主动中断,并暴露死循环的函数名字。在代码里面有大量的while这样的状态机,一不小心就会出现死循环。原创 2022-09-25 03:44:03 · 1566 阅读 · 0 评论 -
html实体和普通标签转换
html实体(代表某个字符的多个字符串组合)原创 2022-09-22 18:25:57 · 812 阅读 · 0 评论 -
Shadow DOM 样式隔离 &&js沙箱&&qiankun
这种方法可能使用于中台这种嵌套其他子应用的场景,目前没遇到其他使用场景或有更好的解决方案不管是link导入的样色还是标签样色都可以被隔离,不影响shadow dom外层的样色。原创 2022-08-24 11:32:53 · 2157 阅读 · 0 评论 -
flutter 隐藏键盘
【代码】flutter 隐藏键盘。转载 2022-08-22 15:02:49 · 803 阅读 · 0 评论 -
安卓混入flutter--弹出flutter回调拦截
不会触发WillPopScope下面的onWillPop回调函数,3.flutter退回安卓时候不会触发WillPopScope拦截回退。添加代码“Navigator.maybePop(context);2.判断当前页面是路由里面最后一个栈元素。1.退出flutter页面到安卓。.........原创 2022-08-19 10:18:05 · 903 阅读 · 0 评论 -
(Flutter+getX实现)异步任务竞态更新-已过期的不再允许更新
实现了javascript的异步任务竞态更新,最近公司用flutter,也遇到了类似的场景,既然使用到了那就记录下了。代码只是单纯的吧javascript核心代码转换成dart的语法,几乎完全不变文件import './utils/demoUtils.dart';辅助函数。...原创 2022-08-10 23:28:30 · 1488 阅读 · 0 评论 -
flutter 获取设备高度的一些api
获取出去状态栏高度,appBar的高度(没有剪去底部填充)获取屏幕底部填充的高度。获取appBar高度。原创 2022-08-10 10:21:10 · 1341 阅读 · 0 评论 -
修复:flutter 键盘出现时候导致固定底部的按钮被顶上来
MediaQuery.of(context).size.height是拿到设备工作区域的逻辑高度,上面的代码的意思是设置一个可滚动的容器,滚动容器里面的Contaainer的高度等于设备工作区的高度,单键盘出来的时候,SingleChildScrolVeiw的高度约等于设备的屏幕高度减去键盘的高度,但是Container的高度还是之前的设备工作区的高度,所以SingleChildScrollView可滚动............原创 2022-07-25 11:33:47 · 3289 阅读 · 0 评论 -
不经过webpack的编译使用import
在script标签中写js代码,或者使用src引入js文件时,默认不能使用module形式,即不能使用import导入文件,但是我们可以再script标签上加上type=module属性来改变方式。原创 2022-07-15 14:54:22 · 1013 阅读 · 0 评论 -
点击事件 事件委托的情况下实现阻止冒泡
最近在研究react的事件,都说他是合成事件,整个dom唯一绑定事件的是document。我想这不就是事件委托么,有啥好研究的,于是我去重温了下事件委托,顺便看了阻止冒泡。突然突发奇想,如果两个结合在一起呢?能否实现子节点点击了,父节点不能触发点击事件好像n年前我还是小萌新,在广电商做切图仔的时候请教过我的组长,他没有给到我满意的答案。今天这个想法又冒出来了。我得解决它一下。它用了 e.nativeEvent.stopImmediatePropagation();nativeEvent.stopImm原创 2022-06-26 00:00:52 · 616 阅读 · 0 评论 -
react context的三种用法
个人理解转成大白话:提供了一个局部的全局作用域,使用Context则无需再手动的逐层传递。本文主要介绍3种的使用方式:先写好使用的基础环境条件,后续的代码都是基于此环境在根组件中,导入上面写的,并使用提供的组件进行包裹,圈定局部的全局作用域,传值后可以提供给子组件进行消费在组件中,导入,使用其提供的组件来订阅的变更,需要一个函数作为子元素,函数的第一个形参便是组件提供的值此时页面中应该出现json格式的value值 导入钩子函数,该函数接收的返回值,返回的结果为该的当前值,当前的 值由上转载 2022-06-10 11:14:27 · 3061 阅读 · 0 评论 -
避免异步任务竞态更新-已过期的不再允许更新
这个概念在前端里面其实比较少听到,但是其实我们是有遇见过的,并且很常见。只是翻遍了前端书籍都很难到对这个概念的解释。有幸读到霍春阳的《vue.js设计于实现》,真的是三生有幸有代码①如下:let res=null;function async update(){res=await Api.get(“someThing”);return res;}var A=update();// 假设返回结果为avar B=update();//假设放回结果为b假设受到网络波动的..原创 2022-05-14 13:23:05 · 472 阅读 · 0 评论 -
typescript interface 覆盖
我们想对Antd的TimePicker组件进行封装,理由在于他必须接受一个moment对象,而我们的后端接口给我们的是字符串对象。于是,我们想要一个接受字符串,onchange时候传回来format后的字符串这样一个组件。因为我们这个组件的大多数属性和原来TimePicker的props是一样的,所以我们直接继承它import type { TimePickerProps } from 'antd';interface TimePickerPropsPlus extends T原创 2022-05-11 09:28:36 · 4257 阅读 · 0 评论 -
antd react 多行表格输入框 编辑 新增效果
这里用到的Form.list以及元素html的table标签,之前表单校验在线代码prop:dataSource:参考蚂蚁table的dataSourcecolumns:参考蚂蚁的table的columnsform:是蚂蚁的Form.useForm()rowConfig:表单校验规则,目前只写了required,可以通过改写添加其他规则text:新增按钮的文字表单组件import { Form, Button } from "antd";import React f.原创 2022-04-27 22:19:39 · 2564 阅读 · 0 评论 -
antd react 表格单行编辑代码 和动态新增
在线demo代码:直接复制黏贴就可以运行import React, { useState } from "react";import { Form, Input, Table, Typography } from "antd";import { message, Button } from "antd";import styles from "./styles.css";const isEditing = (record) => { return record.editabl原创 2022-04-27 21:27:03 · 1262 阅读 · 0 评论 -
封装一个有缓动效果的拖拽功能
类似苹果的拖拽这是非常场景的功能,但是我不想让它和dom关联太多,而是只封装个函数dom结构如下: <div class="box"> <div class="innerBox"> <div class="item"></div> <div class="item"></div> <div class="item">原创 2022-03-24 13:50:53 · 1281 阅读 · 0 评论 -
js获取span到浏览器窗口顶部的距离,包括被lineHeight撑开的部分在内
getBoundingClientRectgetBoundingClientRect().top拿到的是真实dom部分到顶部的距离,不把行高算在内 getBoundingClientRect().height获取的也是内容部分的高度,如果没有设置样式height某些情况下应该拿到行高到顶部的距离,也就是绿色开始位置到顶部的距离代码截图:在线访问#box(绿色部分,无高度设置,被红色部分的行高撑开):offsetY:10 getBounding...原创 2022-03-21 10:42:10 · 1237 阅读 · 0 评论 -
响应式简单代码
响应式简单代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2022-03-01 11:34:58 · 2091 阅读 · 0 评论 -
获取dom是否存在可滚动的子节点,支持多层嵌套,100层以内
scrollHeight指的是元素的内容高度,即如果有滚动条,它的值会等于内容实际的高度加padding值(并不包含border和margin值),在没有内容溢出的情况下它的值等于clientHeight。clientHeight指的是元素的内部高度的px值,包括content和padding值之和,并不包括横向滚动条(horizontal scrollbar)、border和margin的值, 故如果每个元素的scrollHeight > clientHeight,...原创 2022-02-28 11:46:06 · 1034 阅读 · 0 评论