Table of contents
How to turn the entire website gray
Get a random number in a range
This article is used to record fragmented knowledge points and will be continuously updated. . .
How to turn the entire website gray
On some special days, the page will be grayed out to express commemoration. At first glance, it may seem like a very complicated function to make all pages of the entire website gray. In fact, it can be achieved with only one line of code - just add filter: grayscale(100%) to the root tag (html or body) ); that’s it.
Before adding:
After adding:
If you need to adapt to multiple browsers, you can add as needed:
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 and vw size units
vh and vw are relative units, relative to the viewport size
l vw: viewport width For example: 1vw = 1/100 viewport width
l vh: viewport height For example: 1vh = 1/100 viewport height
.demo-wrap {
width: 100vw;
height: 100vh;
background-color: aquamarine;
}A width setting of 100vw and a height setting of 100vh means that the width and height of the element are equal to the width and height of the viewport.
Get environment variables
How to obtain environment variables in the vite project: import.meta.env
Methods for react and vue2 projects to obtain environment variables: process.env.NODE_ENV
Get a random number in a range
getRandomNum(max, min) {
return Math.floor(Math.random() * (max - min + 1) + min)
}explain:
Get a random number in a certain range, such as 2~7
Math.random() returns a random number between 0 and 1 (including 0, but excluding 1, that is, [0,1))
Math.random*(7-2+1) returns a random number [0,6) between 0 and 6
Math.random*(7-2+1)+2 returns a random number between 2 and 8 [2,8)
Math.floor(Math.random*(7-2+1)+2) returns any integer between 2 (including 2) and 8 (excluding 8), that is, 2,3,4,5,6, Any one between 7.
Circle Reading Assistant
Circle is a very easy-to-use Google reading assistant. For specific usage techniques, please see the website introduction: http://circlereader.com/usage
You can make some settings according to your own habits.
