目录
该篇文章用于记录零碎知识点,将会不断更新。。。
整个网站网页变灰的方法
在一些特殊的日子会将网页变灰来表达纪念之情。咋一听使整个网站的所有网页都变灰会感觉是一个很复杂的功能,事实上,只需要一行代码就能实现——只需要在根标签(html或者body)添加 filter: grayscale(100%);即可。
没添加之前:
添加之后:
如果需要适配多个浏览器,可以按需添加:
html {
filter: grayscale(100%);
/* webkit */
-webkit-filter: grayscale(100%);
/*firefox*/
-moz-filter: grayscale(100%);
/*ie9+*/
-ms-filter: grayscale(100%);
/*opera*/
-o-filter: grayscale(100%);
}
vh和vw尺寸单位
vh和vw是相对单位,相对视口尺寸
l vw:viewport width 例如: 1vw = 1/100视口宽度
l vh:viewport height 例如: 1vh = 1/100视口高度
.demo-wrap {
width: 100vw;
height: 100vh;
background-color: aquamarine;
}
width设置100vw和height设置100vh表示元素的宽和高等于视口的宽和高。
获取环境变量
vite项目中获取环境变量的方法:import.meta.env
react和vue2项目获取环境变量的方法:process.env.NODE_ENV
获取某个范围的随机数
getRandomNum(max, min) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
解释:
获取某个范围的随机数,比如2~7
Math.random()返回一个0和1之间的随机数(包括0,但是不包括1,即[0,1))
Math.random*(7-2+1)返回一个0到6之间的随机数[0,6)
Math.random*(7-2+1)+2返回一个2到8之间的随机数[2,8)
Math.floor(Math.random*(7-2+1)+2)返回一个2(包括2)到8(不包括8)之间的任意整数,也就是2,3,4,5,6,7之间的任意一个。
Circle阅读助手
Circle是一款非常好用的谷歌阅读助手。具体使用技巧请看网站介绍:http://circlereader.com/usage
可以根据自己的习惯进行一些设置。