随笔/备忘

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属性

/* 指定元素的内容应该如何去适应指定容器的高度与宽度。 
可用于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;

二、多行省略号

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

防抖和节流

防抖：

function debounce(fn, delay = 200) {
    let timeout = null;
    return function(...args) {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        timeout = setTimeout(() => {
            fn.apply(this, args)
        }, delay);
    }
}

节流

// 节流
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

检测用户操作系统

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导出和导入命令

# 导出
.\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

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

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

06-11

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