记 7

学习一 类

class Point {//定义类的时候首字母大写
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    init() {
        this.sum = this.x + this.y;
    }
    toString() {
        return `(${this.x},${this.y})`;
    }
}

let p = new Point(3, 4);//类的实例

在静态函数之前加上 static 关键字，通过类来调用

Point.print_class_name();

学习二 webSocket

webSocket是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。用于在Web浏览器和服务器之间进行任意的双向数据传输。可以使服务器避免打开多个HTTP连接进行工作来节约资源，提高了工作效率和资源利用率。

实现过程为浏览器发出webSocket的连线请求，服务器发出响应，这个过程称为握手,握手的过程只需要一次，就可以实现持久连接。

学习三 新的媒体查询

为系统首选项中指定优先减少运动的用户创建避免运动的样式(前庭障碍防止眩晕？）

/* Applies styles when Reduced Motion is enabled */ 关闭动效
@media screen and (prefers-reduced-motion:reduce){}
or
@media screen and (prefers-reduced-motion){}


/* Applies styles when the user has made no preference known */ 未关闭 
@media screen and (prefers-reduced-motion: no-preference){}

学习四 css动画animation属性

animation 通常与 @keyframes（关键帧） 搭配使用

@keyframes animation-name {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

有以下属性：

animation-name - 定义要绑定到选择器的关键帧名称。

animation-duration- 定义动画完成一个周期所需的时间。

animation-timing-function- 定义动画的速度曲线。（平稳、渐快、渐慢...）

animation-delay- 定义动画开始前等待的时间。

animation-iteration-count- 定义动画播放的次数。可以是具体数字，也可以是 infinite（无限循环）。

animation-direction- 定义动画是否应该轮流反向播放。

animation-fill-mode- 定义动画在播放之前和之后如何应用样式。

animation-play-state- 定义动画是否正在运行或已暂停。