• 每日学习（1）

    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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    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>

    • 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

    4. 转换成数值类型

    1. parseInt()

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

    2. Number()

    可以转换成整数

    3. 非整数类型转换成NaN

    1. typeof(NaN) === ‘number’ // true
    2. 所以一般判断他是不是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);
        }
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 相关阅读:
    QT多线程的四种实现方式之一：QThread类的run
    数据库实验7 完整性约束
    小码农也有大目标，最新BAT大厂Java面试总结
    STM32F429基于TouchGFX进行简单控制LED和显示ADC值
    Vue入门
    第 1 篇：搭建OpenGL环境
    POJ3687Labeling Balls题解
    Unity 头顶图文字性能优化
    《MongoDB入门教程》第01篇 MongoDB简介
    搭建react项目
  • 原文地址：https://blog.csdn.net/Bon_nenul/article/details/126514933