2022

01-10

img标签图片失效解决办法

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

01-04

保留两位小数toFixed(2)
判断是否为数字isNaN(),数字返回false,不是数字返回true

12-30

实用css属性

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

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

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

memos更新指令

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

10-23

一、单行省略

1
2
3
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

二、多行省略号

1
2
3
4
5
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;

9-30

修改MySQL密码

ALTER USER ‘root‘@’localhost’ IDENTIFIED BY ‘123456’;

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>

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随机选择数组元素

1
ls[Math.floor(Math.random() * ls.length)]

06-21

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

1
##define _CRT_SECURE_NO_WARNINGS 1

06-14

隐藏滚动条

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

06-13

媒体自适应css

1
2
3
4
5
/* 小于多少像素 */
@media screen and (max-width: 468px) {}

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

06-11

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