陆克和他的那些代码

前端小玩意 - 太有创意了~ 这个开源项目竟能将文字、图片、视频秒变文本格式！

2022年圣诞节到来啦，很高兴这次我们又能一起度过~ 这个想法也是之前一直想制作一个有交互性的圣诞快乐祝福网页，一直没有时间去实现，正好趁着这次活动来满足下自己的小小的愿望哈~利用前端三剑客绘制一幅《圣诞节快乐》交互祝福效果噢~

methods: { fetchSourceData(callback) { return new Promise((resolve, reject) => { resolve(this.sourceData = this.$refs.ht.hotInstance.getSourceData()) }) }, ...

.then() 里边有 .then() 的情况。因为 .then()返回的还是promise实例，会等里面的 .then()执行完，在执行外边的。对于我们来说，此时最好将其展开，阅读体验更好~console.log('start')new Promise(resolve=>{ console.log('Step 1') setTimeout(()=>...

首先，推荐一波Promise入门视频课程：https://www.imooc.com/learn/949（讲解得还不错，只是不知为何评分那么低！）一、前言本文主要对ES6的Promise进行一些入门级的介绍。要想学习一个知识点，肯定是从三个方面出发，what、why、how。下面就跟着我一步步学习吧~二、什么是 Promise首先是what。那么什么是Promise呢？...

遍历数组通常使用for循环，ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。Array.prototype.method=function(){　　console...

1、import不使用花括号不使用{}来引用模块的情况下，import模块时的命名是随意的，即如下三种引用命名都是正确的；它总是会解析到A.js中默认的export default。// A.jsexport default 42export const A = 52// B.js，B.js 引用 A.jsimport A from './A'import MyA ...

相信很多人都在vue使用过export、export default、import，然而它们到底有什么区别呢？在ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，expor...

// 获取CancelTokenconst CancelToken = axios.CancelToken;const source = CancelToken.source();// http request 拦截器axios.interceptors.request.use( (config) => { // 全局添加cancelToken newConf...

mixins.stylPs：功能：名字过长自动省略号省略。

一、缩排（Indentation）Stylus蛮“玄幻”的(如基于缩进)，空格有重要的意义，所以，我们使用缩排和凹排代替花括号"{}"。Ps：缩进模仿html结构，如果层级不对，显示就会出问题。...

什么是 Scoped？在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。Scoped 实现原理Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前...

在使用非localhost地址访问时打开摄像头失败，但使用localhost/127.0.0.1打开摄像头又是正常的。解决方案新版本 Webrtc 部署到网络需要 HTTPS才能用摄像头，Firefox估计没限制。所以把 HTTP 改成 HTTPS 即可，当然 HTTPS 你提前要配置好。...

HTML - 输入框 Input 按回车 Enter 自动刷新页面解决方案

前言HTML5为网页设计引入了一个新元素，即画布（canvas）元素。该元素用于在网页中使用JavaScript实时创建图形。准备工作画布元素会在页面上创建一个矩形区域。默认的尺寸规格为300px宽，150px高。可以使用JavaScript指定具体大小。本方法的相关示例代码激增较快，可以在Packt Publishing的网站中获取全部相关代码。实现方式首先，在一...

前言本方法也使用画布和JavaScript通过浏览器绘制文本和实现特殊效果。通过画布无法直接实现内侧渐变的阴影效果或插图效果，但是，使用stroke方法可以模拟文本中的内侧阴影。准备工作本方法会使用前面章节已经使用过的一段代码。可以从Packt Publishing的网站直接下载这段代码，它与2.3节中的代码是一样的。这段代码可以运行在本地电脑中，不需要任何Web服务器。可以从本...

有的浏览器可以根据你的头标签来识别（甚至尾标签写错了都没事），但不推荐这样写。

1. 行注释2. 段落注释3. 条件注释兼容性检查必备

H5 的 audio 标签在不设置 controls 这个属性的情况下，那么他会默认的隐藏本身的空间，但是方法还能用。

前言HTML5中的画布元素不只是能给文本着色或者添加阴影，你也可以用它来移动或操作位于画布区域中的元素对象。在本节中，我们将旋转位于画布中的元素对象。准备工作学习本节需要掌握之前的几节。如果跳过了之前的几节也没关系，你还可以参照完整代码来学习。实现方式一旦你完成了之前技巧中的画布设置步骤，那么实现旋转的基本步骤很简单。在函数开头添加一个rotate方法的调用。...

fontph1em==16px。 为啥只到六级呢？ i、六级够用了；ii、绝大浏览器的字体大小最小只到12px。aa 标签，href 在写外网的时候，必须前缀 http/https 要加上。 href 是 Hypertext Reference 的缩写。ul ol dl li dt能通过样式就尽量不要使用属性来描述标签。...

方法就是 url protocol 的方式来实现。用这种方式实现，任何浏览器都兼容，不会存在只有IE或FIREFOX才行的情况。都用过QQ、迅雷、电驴，在网页上点击的时候，就会弹出QQ，迅雷，电驴的下载界面，用的就是这个原理。1、使用记事本（或其他文本编辑器）创建一个 protocal.reg 文件，并写入以下内容Windows Registry Editor Version ...

当用异步线程处理业务时，比如：在实时搜索用户的信息时，至少找到一个用户，正常显示匹配的用户；如果一个都找不到，则显示“暂无数据”；好，问题来了，假如这里有 A、B 两个异步请求，假设 A 是一个都找不到的情况，B 是至少找到一个用户，而且 A 先开始请求，B 再请求，但 B 先返回，显示找到的用户，但此时 A 又回来了，显示 "暂无数据"，按理说此时的正确答案应该是：找到用户的情况，因为 B 是...

JS - 如何获取 JSON 子项的个数（length）？

在一些特殊的业务场景中，需要走网络请求，但是执行后没有一些必要的钩子函数来处理一些问题，可以利用传参时的 Value 可以执行一些必要的代码，哪怕不需要这个 Key，但我们可以伪造一个 Key 用来执行我们需要的代码，比如。handleFun ({ key: value // 此时的 value can do something...}).then(res => { ...

this指的是当前位置的上下文，其实简单来说就是当前所在位置的最直接的结构体对象。教程中例子，一开始出错位置的this.setData()，这里的this指的是wx.showModal({...})里面传入的结果体对象，因此它不具备setData()方法。而自定义的showModal()方法是在Page({...})中传入的对象中定义的，因此在var that = this处，this指的就...

<script type="text/javascript"> var msg = new SpeechSynthesisUtterance("hello everyone"); window.speechSynthesis.speak(msg);</script>Ps：简单粗暴，唯一的缺点就是声音不美丽，但可以通过阿里云的 AI 语音合成 SDK ...

play () { let mp3 = "https://wxgj-oss.oss-cn-hangzhou.aliyuncs.com/audio/orgid/userid/sign.mp3" let audio = new Audio(mp3) audio.play() // 播放音频对象}

// 创建 OSS 客户端对象createOssClientTemp () { return new Promise((resolve) => { let client = new OSS({ accessKeyId: 'xxx', accessKeySecret: 'xxx', bucket: 'xxx' ...

JS - 前端生成 UUID 四种方法

JS - 前端人脸识别框架 Tracking 与 JqueryFaceDetection

JS - 垃圾回收机制

Recorder H5使用简单，功能丰富，支持PC、Android，但IOS上仅Safari支持录音；RecordApp除Recorder支持的外，支持Hybrid App，IOS上支持微信网页和小程序Web-View。传送门：https://xiangyuecn.github.io/Recorder...

官网：http://www.mescroll.com/api.html?v=191101#options在iOS的微信，QQ，Safari等浏览器，列表顶部下拉和底部上拉露出浏览器灰色背景，卡顿2秒 ?这个问题只存在 iOS 浏览器，android，PC是正常的；原因是 iOS 自身的回弹效果导致的，解决方法如下：1. mescroll.min.css 和 mescroll.min...

存储 生命周期 cookie 没有设置 expires 选项时，cookie 的生命周期仅限于当前会话中，关闭浏览器意味着这次会话的结束，所以会话 cookie 仅存在于浏览器打开状态之下。 这就是为什么当你登录一个 Web 应用时经常会看到一个复选框，询问你是否记住登录信息：如果你勾选了复选框，那么一个 expires 选项会被附加到登录 cookie 中。 local...

零、前言大多数计算机语言，有且仅有一个表示"无"的值，比如，C语言的NULL，Java语言的null，Python语言的None，Ruby语言的nil。有点奇怪的是，JavaScript语言居然有两个表示"无"的值：undefined和null。这是为什么？一、相似性在JavaScript中，将一个变量赋值为undefined或null，老实说，几乎没区别。var a = undefined;...

一、属性说明：clientWidth = width（可见区域）+ padding - 滚动条宽度offsetWidth = width（可见区域） + padding + border（若有滚动条宽，那就包含在里面了）scrollWidth = width（自身实际长度，包括不可见区） + padding + border二、图例：...