宅家呗

# 前端笔记

# CSS：渐变色文字

h1 {
  font-size: 4rem;
  background: linear-gradient(to left, rgb(112, 101, 214), rgb(230, 106, 213));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}
1
2
3
4
5
6
7

效果：

mark

# CSS：美化单选按钮

以下方法利用label::before伪元素覆盖默认按钮，另外可以用appearance='none'，在默认样式上修改，详见：MDN <input type="radio"> (opens new window)

HTML:

<div>
  <input type="radio" name="option" id="radio_1">
  <label for="radio_1">选项1</label>
</div>
<div>
  <input type="radio" name="option" id="radio_2">
  <label for="radio_2">选项2</label>
</div>
1
2
3
4
5
6
7
8

CSS:

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  font-size: 1.25rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

input[type="radio"] + label::before {
  content: "";
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 50%;
}

input[type="radio"]:checked + label::before {
  background: url(./icons/checked.svg); 
  background-size: cover;
}
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

效果：

mark

# CSS：美化滚动条

/*滚动条的宽度*/

::-webkit-scrollbar {
    width:9px;
    height:9px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

::-webkit-scrollbar-track {
    width: 6px;
    background-color:#0d1b20;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}

/*滚动条的设置*/

::-webkit-scrollbar-thumb {
    background-color:#606d71;
    background-clip:padding-box;
    min-height:28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}
/*滚动条移上去的背景*/

::-webkit-scrollbar-thumb:hover {
     background-color:#fff;
}
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
  • ::-webkit-scrollbar - 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
  • ::-webkit-scrollbar-button - 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
  • ::-webkit-scrollbar-track - 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
  • ::-webkit-scrollbar-track-piece - 内层轨道，滚动条中间部分（除去）。
  • ::-webkit-scrollbar-thumb - 滚动条里面可以拖动的那部分
  • ::-webkit-scrollbar-corner - 边角
  • ::-webkit-resizer - 定义右下角拖动块的样式

# CSS：滚动条自动吸附

https://ishadeed.com/article/css-scroll-snap/ (opens new window)

# CSS：scroll在苹果safari中滚动不流畅问题

  overflow: hidden auto;
  -webkit-overflow-scrolling: touch; 
  overflow-y: scroll;
1
2
3

# CSS：自定义对话框

纯CSS实现自定义形状的对话框。

HTML：

<div class="box"></div>
1

CSS:

.box {
  width: 200px;
  height: 100px;
  background-color: azure;
  border-radius: 20px;
  position: relative;
}

.box::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-25px);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 30px solid azure;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果：

mark

# CSS：修改滑块样式

HTML：

<div>
  <label for="slider"></label>
  <input type="range" name="range" id="slider" min="5" max="10" step="0.01">
</div>
1
2
3
4

CSS:

 /* webkit */
input[type="range"] {
  -webkit-appearance: none;
  outline: none;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right,#12fbc5, #fbff0f);
  border-radius: 6px;
  height: 10px;
  display: inline-flex;
  align-items: center;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: linear-gradient(to top, #14cadb, #9ae8fb);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  cursor: pointer;
}

/* moz */

input[type=range]::-moz-range-track {
  background: linear-gradient(to right,#12fbc5, #fbff0f);
  border-radius: 6px;
  height: 10px;
  display: inline-flex;
  align-items: center;
}

input[type=range]::-moz-range-thumb {
  background: linear-gradient(to top, #14cadb, #9ae8fb);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #fff;
  cursor: pointer;
}
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
42
43

效果：

mark

相关文章：

How to Style Input Type Range in Chrome, Firefox, and IE (opens new window)

A Sliding Nightmare: Understanding the Range Input (opens new window)

# CSS：自定义光标

语法：

/* 使用URL，并提供一个关键字值作为备用 */
cursor: url(hand.cur), pointer;
1
2

在线代码：https://codepen.io/zjbcool/pen/WNGjdqz (opens new window)

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor (opens new window)

# Grid 网格布局参考

# CSS属性

# CSS函数

相关链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout (opens new window)

# 深入解析minmax()函数

https://ishadeed.com/article/css-grid-minmax/ (opens new window)

# CSS：transition过渡

div{ 
  transition: transform 0.75s ease-out;
}
1
2
3

有多个属性时：

div{
  transition: width, height, 0.5s ease;
}
1
2
3

transition的4个属性：

  • transition-property - 过渡属性
  • transition-duration - 过渡时长
  • transition-timing-function - 过渡动画曲线
  • transition-delay - 过渡延时

在线代码： https://codepen.io/zjbcool/pen/rNLGvzX (opens new window)

# CSS：文字省略显示

  1. 单行固定宽度
p {
  width:300px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
1
2
3
4
5
6
  1. 多行固定行数
// 支持所有浏览器，老旧IE除外
p {
  width:300px;
  display: -webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
1
2
3
4
5
6
7
8

在线代码： https://codepen.io/zjbcool/pen/PoGWWvW (opens new window)

# VScode：去掉多余空行

打开vscode，执行菜单Edit -> Replace，或使用快捷键crl + H，然后使用正则表达式：^\s*\n ，替换内容为空，即可删除所有空行。

VScode

# JS：ES6导入模块错误

ES6导入模块错误Cannot use import statement outside a module，出现此错误需要在script标签中加入type="module"属性。

<script type='module' src='main.js'>
1

# JS：DOM获取节点

document.getElementById(elementId) // 元素选择器
document.querySelector(Name)
document.querySelectorAll(Name)

parentObj.childNodes // 从父到子 会把换行和空格也当成是节点信息
parentObj.children  // 最方便

childNode.parentNode  // 从子到父
1
2
3
4
5
6
7
8

# JS：DOM添加节点

document.createElement('li'); // 
document.createTextNode('文本节点') // ==> li.innerHTML = "文本节点";

parent.appendChildren(child); // 在当前节点后插入

parent.insertBefore(new_child, parent.children[0]); // 在列表第1项前插入

parent.replaceChild(new_child, parent.children[0]) // 替换节点
1
2
3
4
5
6
7
8

# JS：DOM删除子节点

parent.removeChild(thisNode) // 只有这一个方法
1

删除所有子节点：

for(var i = children.length - 1; i >= 0; i--) { 
  parent.removeChild(children[i]); // 从后往前，删得干净
}
1
2
3

# JS：classList操作

var div = document.querySelector('.div');
div.classList.add('class1'); // 添加类
div.classList.remove('class2'); // 删除类
div.classList.toggle('class3'); // 切换类

div.setAttribute('class', 'class4'); // 设置属性
1
2
3
4
5
6

# JS：HTML DOM Element 对象

https://www.w3school.com.cn/jsref/dom_obj_all.asp (opens new window)

# JS：事件委托，避免父元素执行事件

点击子元素放大，但点击父元素时不受影响

<ul>
  <li><img src='img.jpg'>放大</li>
  <li><img src='img.jpg'>放大</li>
  <li><img src='img.jpg'>放大</li>
</ul>
1
2
3
4
5
img {
  pointer-events: none; 
}
1
2
3
var parent = document.querySelector('ul');
parent.addEventListener('click', function(e){
  for(var i=0; i<parent.length; i++){
    parent.children[i].style.transform = 'scale(1)';
  };
  if(this != e.target){
    e.target.style.transform = 'scale(2)';
  }
}, false)
1
2
3
4
5
6
7
8
9

在线代码： https://codepen.io/zjbcool/pen/GRqvGdV (opens new window)

# JS：阻止默认事件

a标签

<a href="javascript:void(0);">按钮</a>
<a href="javascript:;">按钮</a>
1
2

js事件方法：preventDefault()

btn.onclick = function (e){
  e.preventDefault(); // e.returnValue = false 
}
1
2
3

# JS：sort()排序

语法：

arr.sort([compareFunction])
1

例：实现物体列表按数字后缀排序

var objs=['obj_1','obj_3','obj_4','obj_2'];
objs.sort(function(a,b){
  return Number(a.replace('obj_', '')) - Number(b.replace('obj_', ''))
})
1
2
3
4

在线代码：https://codepen.io/zjbcool/pen/ExyLyZK?editors=0010 (opens new window)

MDN 参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort (opens new window)

# JS：IOS10以上Safari浏览器无法禁止缩放的解决方案

window.onload = function() {
    // 阻止双击放大
    var lastTouchEnd = 0;
    document.addEventListener('touchstart', function(event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    });
    document.addEventListener('touchend', function(event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
 
    // 阻止双指放大
    document.addEventListener('gesturestart', function(event) {
        event.preventDefault();
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# JS：禁用右键及复制

//js禁止鼠标右键打开及复制
document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");
 
function click1() {
    if (event.button == 2) { return false; }
}
document.onselectstart = click1;
1
2
3
4
5
6
7
8

疑问？

请在钉钉群：21935218交流。群内除聚集众多开发者，还有最新动态、视频教程、智能客服@宅小呗、答疑、直播、下载等实用功能。如需宅家呗提供技术支持，请加钉钉好友：zjbcool 。

Verge3D知识社区 客服
上次更新: 2020-12-17 10:51:47

← 拼图和代码片段 →