前端
# 私有字段、方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class A {
#abc; // 定义一个私有字段
constructor() {
this.#abc = 1;
}
#method() {
}
}
var a = new A();
console.log(a); // 报错
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 让你的文字立起来 CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>SHADOW</h1>
<style>
h1 {
font-weight: 700;
margin: 30px;
}
h1::before {
content: 'SHADOW';
position: absolute;
color: #000;
transform: scaleY(0.5) skew(50deg) translate(-28px, 7px);
z-index: -1;
filter: blur(5px);
mask-image: linear-gradient(transparent, #000);
}
</style>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# CSS 实现瀑布流布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<img src="https://picsum.photos/id/237/100/200" alt="">
<img src="https://picsum.photos/id/238/200/200" alt="">
<img src="https://picsum.photos/id/239/100/200" alt="">
<img src="https://picsum.photos/id/240/100/200" alt="">
<img src="https://picsum.photos/id/241/200/200" alt="">
<img src="https://picsum.photos/id/242/200/300" alt="">
<img src="https://picsum.photos/id/237/100/200" alt="">
<img src="https://picsum.photos/id/238/200/200" alt="">
<img src="https://picsum.photos/id/239/100/200" alt="">
<img src="https://picsum.photos/id/240/100/200" alt="">
<img src="https://picsum.photos/id/241/200/200" alt="">
<img src="https://picsum.photos/id/242/200/300" alt="">
</div>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-template-rows: masonry;
/* 目前只有火狐通过设置后才支持，其他浏览器不支持 */
}
img {
width: 100%;
display: block;
}
</style>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# parseInt和Math.floor的区别
# 优化代码分支，使代码更优雅
// function speek(name) {
// const map = {
// 牛: 'moom',
// 猫: 'meow',
// 犬: 'woof',
// 狗: 'bark',
// }
// if (map[name]) {
// console.log(map[name])
// } else {
// console.log('...');
// }
// }
// speek('牛');
function speek(name) {
const map = [
[
() => name.includes('牛'),
() => console.log(name + '哞哞叫')
],
[
() => name.endsWith('牛') && name.length <= 3,
() => console.log(name + '嗷嗷叫')
],
[
() => name.endsWith('猫') && name.length <= 3,
() => console.log(name + '喵喵叫')
]
]
const target = map.find(m => m[0]())
if (target) {
target[1]()
} else {
console.log('...')
}
}
speek('牛');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 表达式 nb
([][
[]
] + [])[+!![]] + ([] + {})[+!![] + !![]]
// [][[]] + [] + [+!![]] + ([]+{}) + [+!![]+!![]]
// undefined + '' + [1] + '[object Object]' + [2]
// "undefined"[1] + "[object Object]"[2]
1
2
3
4
5
6
2
3
4
5
6
# 文字描边 text-stroke
body {
background: #000;
}
p {
font-weight: 700;
font-size: 50px;
color: transparent;
/* 非标准属性 */
-webkit-text-stroke: 2px #FFF;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 如何使用 flex 弹性盒保持容器均分布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="part" style="background: red;">afsadfsdfsdklfjslkdjfksjdfsdlkfjlskajdkfsd fjasdkljfkasjdkfjasdkjfkas
dfjsadkjfkasdjfkjsdjfads</div>
<div class="part" style="background: greenyellow;"></div>
<div class="part" style="background: blue;"></div>
</div>
<style>
.container {
display: flex;
width: 100%;
height: 100vh;
}
.part {
/* 元素无内容时，可以用flex-grow:1; 有内容需加上flex-basis:0; */
flex-grow: 1;
flex-basis: 0;
}
</style>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# for-in 遍历的问题
上次更新: 2025/03/27, 15:12:06