【小记】每日学习（1）

01xm

已于 2022-12-08 14:28:56 修改

阅读量206

点赞数

分类专栏：遇到的小问题文章标签：学习 javascript 前端

于 2022-08-25 12:00:00 首次发布

本文链接：https://blog.csdn.net/Bon_nenul/article/details/126514933

版权

遇到的小问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 事件循环

setTimeout(function () {
    console.log(1);
}, 100);

new Promise(function (resolve) {
    console.log(2);
    resolve();
    console.log(3);
}).then(function () {
    console.log(4);
    new Promise((resove, reject) => {
        console.log(5);
        setTimeout(() => {
            console.log(6);
        }, 10);
    })
});
console.log(7);
console.log(8);
// 2379461

2. 原型

function Foo() {
    Foo.a = function () {
        console.log(1)
    }
    this.a = function () {
        console.log(2)
    }
}
Foo.prototype.a = function () {
    console.log(3)
}
Foo.a = function () {
    console.log(4)
}
// 首先第一个没有调用只是构建所以 直接输出直接方法 4
Foo.a(); 4
// 构建了实例对象 Foo函数内部方法开始初始化 
let obj = new Foo();
// 直接输出Foo函数内部的属性方法（静态方法比原型方法优先级高）
obj.a(); 2
// 静态方法被覆盖 输出新的静态方法
Foo.a();  1

3. 动画 animation

常见的属性：

1. animation-name(动画名称)

必须存在

2. animation-duration(动画执行一次所需时间)

默认0，没有动画

3. animation-delay(动画在开始前的延迟时间)

animation-delay的值可以是秒（s）或者是毫秒（ms）,默认值是0，没有延迟。

4. animation-timing-function(动画以何种运行轨迹完成一个周期)

animation-timing-function的值是贝塞尔曲线，默认值是ease,表示动画以低速开始，然后加速，最后在结束前变慢。最常用的值有以下几个：

（1）linear:表示动画从头到尾的速度都是相同的。

（2）ease-in:表示动画以低速开始。

（3）ease-out:表示动画以低速结束。

（4）ease-in-out:表示动画以低速开始和结束。

5. animation-iteration-count(动画播放次数)

animation-iteration-count属性值有两种：
（1）直接写数字，自定义想要播放动画的次数。
（2）infinite：设置动画无线循环播放。

6. animation-fill-mode(定义元素动画结束以后或者未开始的元素样式)

默认值为none，标示，不会在动画结束或者未开始时给元素添加样式

常用属性值为：

（1）forwards:表示动画结束后，元素直接接使用当前样式。

（2）backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值（当animation-direction为reverse或者alternate-reverse时）

7. animation-direction(是否轮流反向播放动画)

默认值是normal，动画正常播放。如果动画只播放一次，则该属性无效。

常用的属性值为：

（1）reverse:表示动画反向播放。

（2）alternate:表示动画在奇数次播放时为正向播放，为偶数次播放时为反向播放。

（3）alternate-reverse: :表示动画在奇数次播放时为反向播放，为偶数次播放时为正向播放。

animation属性在书写通常合并在一起，除非需要单独设置的属性值，animation属性的简写形式为：animation:code 2s 2s linear infinite alternate forwards;

// 动画旋转 当鼠标放在box元素上，暂停动画
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        /* 动画名称 动画执行一次所需要的时间 动画循环次数：无限循环 */
        animation: growLine 1s infinite;
    }
    .box:hover{
        /* 控制动画的运行和暂停 */
        /* paused是暂停 */
        /* running是运行 */
        animation-play-state: paused;
    }
    @keyframes growLine{
        100%{
        	// 偏移360°
            transform: rotate(360deg);
        }
    }
</style>

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

4. 转换成数值类型

1. parseInt()

parseInt 会将字符串转化成整数，但它会忽略非数字部分而不给任何提示，比如：“37ABC” 会转化成 37

2. Number()

可以转换成整数

3. 非整数类型转换成NaN

typeof(NaN) === ‘number’ // true
所以一般判断他是不是NaN，我们采用isNaN()方法，返回一个布尔值；

// 实现一个需求，从数组对象内找到如果是数字或字符串数字类型就放到a数组内，如果是其他类型就放在b数组内
function fn(arr) {
    for (let i of arr) {
    	// 如果是其他类型 Number转化后会成为NaN；
        if (!isNaN(Number(i.value))) {
            a.push(i.value);
        } else {
            b.push(i.value);
        }
    }
}