玩儿过 Konami 游戏的朋友应该都知道 ↑↑↓↓←→←→BA,我们来搞一个小彩蛋在页面中,当在页面输入这段代码后,会有一个隐藏小功能。 没啥关键点,就是纯好玩 let konamiCode = []; const konamiSequence = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]; document.addEventListener('keydown', (e) => { konamiCode.push(e.keyCode); if (k…
玩儿过 Konami 游戏的朋友应该都知道 ↑↑↓↓←→←→BA,我们来搞一个小彩蛋在页面中,当在页面输入这段代码后,会有一个隐藏小功能。 没啥关键点,就是纯好玩 let konamiCode = []; const konamiSequence = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]; document.addEventListener('keydown', (e) => { konamiCode.push(e.keyCode); if (k…
在绘制线条阴影的时候,一般来说有两种方案: 绘制完整的一张图片 绘制一个片段,然后重复渲染 我们今天讨论第二种。它更加高效,更适合大范围渲染。 考虑功能 看上去是一个整体,所以拼接时所有线条要可以完全连上 可以调整线条角度 可以调整线条间距 可以调整线条粗细和颜色 渲染思路 我们可以将线条分为三种状态: 横线 竖线 斜线 前两种,特殊处理即可,我们需要关注最后一种 斜线,我们只需要关注斜线的角度即可。从根本上说,横线 与 竖线 也是斜线的特殊角度而已,所以我们可以统一计算,遇到 0 || 90 的时候,将它们处理成…
现在新创建的项目基本上都安装的是 Dart Sass,直接 npm install sass 即可。比较早的项目中,有安装了 node-sass 的,但是在当前的 node 环境中,会出现各种问题。 安装版本报错 gyp verb find VS msvs_version not set from command line or npm config gyp verb find VS VCINSTALLDIR not set, not running in VS Command Prompt gyp verb fi…
有时开机后,ssr 直接报端口被占,如图: 查找占用程序 大多情况下,首先能想到的就是查找网络服务: netstat -ano | findstr 1081 如果结果里面有结果,那直接按照 PID 找到对应内容,直接关闭它就可以。 # 关闭 taskkill /pid 12345 /f 另外,像我就经常给 ssr 切换一个端口,比如 1082、1080 这样的。但是有些时候连续切几个也不好使,而且也查不到被占端口。这个时候就需要考虑默认预留的情况。 系统保留端口机制(Windows动态端口保留) Hyper-V/容…
在 vue3 中,我们想给 props 声明,有以下几种方式。 Option 方式 首先是 option 方式: export default defineCompoent({ props: { type: { type: String } } }) 这样是我们所熟知的,也是 vue2 和 vue3 通用的,在这里我们可以设置任意内容。 Composition 方式 在 vue3 中,因为提供了 setup 方式,所以有了其他方式: const props = defineProps({ type: { type:…
一个 input 框,可以有选中状态:focus-within,比如这样: 有些时候,我们希望一个 div 等其他只读元素也可以有这样的效果,鼠标点一下,可以这样选中。但是默认情况下,这个是办不到的。 首先,理解 :focus-within :focus-within 是一个 CSS 伪类,当元素或其子元素获得焦点时,会匹配该元素。 也就是说,让 div 获取到焦点就可以。 让 div 获得焦点 1、添加 tabindex 属性 这个非常简单,为 div 添加 tabindex 属性,使其能够获得焦点,然后通过 :…
有时在多次请求情况下,会出现请求和结果表现的不一样。这种情况大多是因为网络传输速度导致,因为请求并不是先进先出,如图效果: 我们希望的是这样: 此时需要抛弃掉前置请求,直接相应最新的一个。这时就用到 CancelToken 机制,当调用这个 token 的时候,系统会知道当前这个请求已经没用了,浏览器会取消继续请求,直接抛弃 // 以 axios 为例,本例中默认已经配置好 axios,直接使用 import axios from 'axios'; const CancelToken = axi…
在兼容旧版浏览器的路上,确实有好多细节的内容。今天在兼容 chrome80 的时候,发现界面中颜色突然没了,打开 F12 查看,发现 rgb 失效了。我心想,咋的,#RGBA 不能用,连 rgba(x,y,z,a) 也不能用了?头大。。。 然后突然发现,奇怪的是有一些 rgb 可以用,有一些 rgb 不能用。这就奇了怪了,才发现原来失效的是包含小数的颜色,如:rgba(205.5, 211.5, 211.5, 0.5) 于是乎,需要在打包的时候将它们转成相近的整数。这种简单的内容,直接在配置文件中些就好了,就不用插…
在用 nvm 管理多个 node 环境时确实方便,但有时在安装的时候会遇到这种情况: 出现这个问题大多是因为是 windows 原因(具体不明,git issue 中作者这么说的) 那么怎么办呢? 手动安装 去这里下载一个对应版本的安装包: 下载地址 比如我要安装 12 版本,就找到对应的文件夹,然后下载 zip 格式的内容: 解压后,安装到 nvm 根目录下。 根目录可以通过命令:nvm root 来查看。 直接新建一个名为 v12.22.12 的文件夹,然后将 zip 中所有文件解压到这里。 此时再看 nvm …
一直觉得 Element-plus 的亮暗切换很漂亮,最近抽时间研究了一下,技术还是比较新的,甚至在打包的时候,对应 api 还报了找不到声明的问题,也算是小坑。 吐槽一下:前端真是天天卷样式,实在搞不动了 实现原理 我们先来看一下 element-plus 的效果: 分析一下可以看出,要想实现这个效果,至少需要四步: 1、找到点击的位置 2、再找到距离点击位置的最远位置(以上图官方为例,点击的是右上角,那么最远的点应该就是左下角) 3、基于上面的点,画一个大圆 4、让这个圆动起来,实现效果切换~ 前面三个都不难,…
(っ•̀ω•́)っ✎⁾⁾ 开心每一天
COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.