该文案的来源是Leonus大佬，文章转载，Copyright© By Leonus

memos更新指令

1
docker-compose down && docker image rm neosmemo/memos:latest && docker-compose up -d

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 媒体自适应 */
/* 小于多少像素 */
@media screen and (max-width: 468px) {}

/* 大于多少像素 */
@media screen and (min-width: 468px) {}

/* 指定元素的内容应该如何去适应指定容器的高度与宽度。 
可用于img标签适应固定宽高的容器。类似于容器的background-size: cover效果。 */
object-fit: cover;

/* 屏蔽鼠标事件 */
pointer-events: none;

/* 使元素宽高比为一比一 */
aspect-ratio: 1/1;

/* 单行省略 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

/* 多行省略 */
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; 

/* 伪类 `:focus-within`
它表示一个元素获得焦点，或，该元素的后代元素获得焦点 */
div:focus-within{
border-color: red;
}

/* 去掉a标签点击蓝色部分 */
-webkit-tap-highlight-color: transparent;

/* 隐藏滚动条 */
::-webkit-scrollbar {display:none}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
// 随机选择数组元素
ls[Math.floor(Math.random() * ls.length)]

// 保留两位小数
toFixed(2)

// 判断是否为数字，是数字返回false，不是数字返回true
isNaN()

// 获取标签名
e.target.tagName

// 监听dom插入
DOMNodeInserted

// 阻止冒泡
e.stopPropagation();
// 禁用默认事件
e.preventDefault(); 

// 创建元素
createElement();
// 添加元素
appendChild();
// 插入元素
insertBefore();

// 将伪数组转成数组
Array.prototype.slice.call()

// 防抖 多次快速点击只会触发最后一次
// 事件触发 -> 开启一个定时器 -> 如果再次触发则清除上一个定时器并创建一个新的 -> 定时到，执行
// 应用场景：
// 1. search搜索联想，用户在不断输入值时，用防抖来节约请求资源
// 2. window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
function debounce(fn, delay = 200) {
    let timeout = null;
    return function(...args) {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        timeout = setTimeout(() => {
            fn.apply(this, args)
        }, delay);
    }
}

// 节流 多次快速点击每time毫秒触发一次
// 事件触发 -> 执行操作 -> 关闭阀门 -> 期间操作无效 -> 时间到，阀门打开 -> 操作可再次触发
// 应用场景：
// 1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)
// 2. 监听滚动事件，比如是否滑到底部自动加载更多
function throttle(fn, time = 300) {
    let pre = 0;
    let timeout = 0;
    return function(...args) {
        const now = Date.now();
        if (now - pre > time) {
            pre = now;
            fn.apply(this, args);
        } else {
            if (timeout) {
                clearTimeout(timeout)
                timeout = null;
            }
            timeout = setTimeout(() => {
                pre = now;
                fn.apply(this, args);
            }, time);
        }
    }
}

// 检测用户操作系统
let system = "其他操作系统"; 
if (navigator.appVersion.indexOf("Win") != -1) system =  "Windows"; 
if (navigator.appVersion.indexOf("Mac") != -1) system =  "Mac"; 
if (navigator.appVersion.indexOf("Linux") != -1) system ="Linux"; 
if (navigator.appVersion.indexOf("Android") != -1) system =  "Android"; 
if (navigator.appVersion.indexOf("like Mac") != -1) system =  "iOS"; 

// 卷去高度
document.documentElement.scrollTop = window.pageYOffset  
// 可视高度
document.documentElement.clientHeight
// 网页宽
document.body.clientWidth
// 网页高
document.body.clientHeight
// 网页宽
document.body.offsetWidth (包括边线的宽)
// 网页高
document.body.offsetHeight (包括边线的高)
// 网页正文全文宽
document.body.scrollWidth
// 网页正文全文高
document.body.scrollHeight
// 网页被卷去的高
document.body.scrollTop
// 网页被卷去的左
document.body.scrollLeft
// 网页正文部分上
window.screenTop
// 网页正文部分左
window.screenLeft
// 屏幕分辨率的高
window.screen.height
// 屏幕分辨率的宽
window.screen.width
// 屏幕可用工作区高度
window.screen.availHeight
// 屏幕可用工作区宽度
window.screen.availWidth

设置默认图片，当图片链接失效时显示。

1
2
<img src="http://www.baidu.com/jfdsklf.img"  onerror="this.src= '/assets/img/head.png'; this.onerror = null;">
// this.onerror = null; 是为了防止替换图片还是丢失，img一直闪烁不停

修改MySQL密码

1
ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';

拾色器

1
<input type="color">

mongodb导出和导入命令

1
2
3
4
# 导出
.\mongoexport --uri mongodb+srv://xxx:xxx@cluster0.wh5yw.mongodb.net/twikoo --collection comment --type json --out twikoo-comments.json
#导入
.\mongoimport --uri mongodb+srv://xxx:xxx@cluster0.wh5yw.mongodb.net/twikoo --collection comment --type json --file twikoo-comments.json

正则

1
2
// 两端匹配
/(?<=前面的内容).*?(?=后面内容)/g

静态文件加？实现刷新效果

1
<script src="/js/script.js?v1"></script>

知识点

一个英文字符串单词之间如果是由转义字符 链接时，CSSword-wrap: break-word;不会起作用，必须是空格才可以。

addEventListener 事件参数

鼠标事件
  • click 当⽤户点击某个对象时调⽤的事件句柄。
  • contextmenu 在⽤户点击⿏标右键打开上下⽂菜单时触发
  • dblclick 当⽤户双击某个对象时调⽤的事件句柄。
  • mousedown ⿏标按钮被按下。
  • mouseenter 当⿏标指针移动到元素上时触发。
  • mouseleave 当⿏标指针移出元素时触发
  • mousemove ⿏标被移动。
  • mouseover ⿏标移到某元素之上。
  • mouseout ⿏标从某元素移开。
  • mouseup ⿏标按键被松开。
键盘事件
  • keydown 某个键盘按键被按下。
  • keypress 某个键盘按键被按下并松开。
  • keyup 某个键盘按键被松开。
  • abort 图像的加载被中断。
  • beforeunload 该事件在即将离开页⾯（刷新或关闭）时触发
  • error 在加载⽂档或图像时发⽣错误。
  • hashchange 该事件在当前 URL 的锚部分发⽣修改时触发。
  • load ⼀张页⾯或⼀幅图像完成加载。
  • pageshow 该事件在⽤户访问页⾯时触发
  • pagehide 该事件在⽤户离开当前⽹页跳转到另外⼀个页⾯时触发
  • resize 窗⼝或框架被重新调整⼤⼩。
  • scroll 当⽂档被滚动时发⽣的事件。
  • unload ⽤户退出页⾯。
表单事件
  • blur 元素失去焦点时触发
  • change 该事件在表单元素的内容改变时触发( , , , 和 )
  • focus 元素获取焦点时触发
  • focusin 元素即将获取焦点是触发
  • focusout 元素即将失去焦点是触发
  • input 元素获取⽤户输⼊是触发
  • reset 表单重置时触发
  • search ⽤户向搜索域输⼊⽂本时触发
剪切板事件
  • copy 该事件在⽤户拷贝元素内容时触发
  • cut 该事件在⽤户剪切元素内容时触发
  • paste 该事件在⽤户粘贴元素内容时触发
拖动事件
  • drag 该事件在元素正在拖动时触发
  • dragend 该事件在⽤户完成元素的拖动时触发
  • dragenter 该事件在拖动的元素进⼊放置⽬标时触发
  • dragleave 该事件在拖动元素离开放置⽬标时触发
  • dragover 该事件在拖动元素在放置⽬标上时触发
  • dragstart 该事件在⽤户开始拖动元素时触发
  • drop 该事件在拖动元素放置在⽬标区域时触发