前端小知识点记录

目录

整个网站网页变灰的方法

 vh和vw尺寸单位

获取环境变量

获取某个范围的随机数 

Circle阅读助手 

---

该篇文章用于记录零碎知识点，将会不断更新。。。 

整个网站网页变灰的方法

在一些特殊的日子会将网页变灰来表达纪念之情。咋一听使整个网站的所有网页都变灰会感觉是一个很复杂的功能，事实上，只需要一行代码就能实现——只需要在根标签（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

可以根据自己的习惯进行一些设置。