2022

9-21

npm装最新版

npm i xxx@latest

8-28

防抖和节流

防抖:

1
2
3
4
5
6
7
8
9
10
11
12
function debounce(fn, delay = 200) {
let timeout = null;
return function(...args) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(() => {
fn.apply(this, args)
}, delay);
}
}

节流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 节流
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);
}
}
}

判断标签类型

可使用:e.target.tagName

8-27

检测用户操作系统

1
2
3
4
5
6
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";

8-26

Javascript:
卷去高度: 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

8-23

伪类 :focus-within
它表示一个元素获得焦点,或,该元素的后代元素获得焦点

left:50%文字换行问题可以通过:white-space: nowrap;解决

08-14

拾色器

html5自带拾色器

1
<input type="color">

js阻止冒泡和禁用默认事件

  • e.stopPropagation();
  • e.preventDefault();

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 该事件在拖动元素放置在⽬标区域时触发

08-07

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

07-27

jsd: https://cdn.jsdelivr.net/gh/Lea321/cdn/xxx

07-19

正则匹配去除两端:/(?<=).*?(?=)/g

07-18

监听dom插入:DOMNodeInserted

07-13

复制到剪切板项目

复制到剪切板插件:clipboardjs

1
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>

复制到剪切板2

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
// 复制
function copy(text) {
var cp = document.createElement('textarea');
cp.style.fontSize = '12pt';
cp.style.border = '0';
cp.style.padding = '0';
cp.style.margin = '0';
cp.style.position = 'absolute';
cp.style.left = '-9999px';
var yPosition = window.pageYOffset || document.documentElement.scrollTop;
cp.style.top = yPosition + 'px';
cp.setAttribute('readonly', '');
text = text.replace(/[\xA0]/g, ' ');
cp.value = text;
document.getElementById('append').appendChild(cp);
cp.select();
cp.setSelectionRange(0, cp.value.length);
try {
var success = document.execCommand('copy', false, null);
} catch (e) {
var success = false;
}
document.getElementById('append').innerHTML = '';

if (success) {
GLOBAL_CONFIG.Snackbar && btf.snackbarShow('文章链接已复制到剪切板');
} else {
GLOBAL_CONFIG.Snackbar && btf.snackbarShow('文章链接复制失败');
}
}

07-07

pip出错问题

1.打开链接https://pypi.org/project/pip/#files
2.下载.tar.gz文件
3.解压该文件
4.进入解压之后的文件夹
5.运行如下代码

1
python setup.py install

6.等待安装完成即可

使用pip-review更新所有包

pip install pip-review
pip-review –local –interactive

07-05

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

07-03

07-02

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

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

js伪数组转数组

1
Array.prototype.slice.call()

js创建/插入元素

1
2
3
createElement();
appendChild();
insertBefore();

06-29

js随机选择数组 ls[Math.floor(Math.random() * ls.length)]

06-28

在网站的js中可以使用fetch发起ajax请求,但是在node中没有fetch,需要安装第三方库

06-21

c语言中添加以下内容防止scanf报错

1
##define _CRT_SECURE_NO_WARNINGS 1

06-14

隐藏浏览器滚动条

1
::-webkit-scrollbar {display:none}

点击复制功能

手机电脑都可以使用的点击复制功能代码

1
2
3
4
5
6
7
8
9
10
11
function copy() {
var text = document.querySelector('#text');
const range = document.createRange();
range.selectNode(text);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
selection.removeAllRanges();
alert("复制成功");
};

注意:如果#text元素外面出现换行的话,复制的内容也会发生换行。解决方法就是在外面再套一层标签。如下:在p标签外面套一层span标签

1
<span><p id="text">这是复制的文本</p></span>

06-13

媒体自适应css:

1
@media screen and (min-width: 800px) and (max-width: 1199px) {}

06-11

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

06-07

阿里云iconfont的js需要在head里面引用。

06-01

作为存储容量单位,100MB的M是2的20次方,作为传输速率单位,100Mb/s的M是10的6次方。