JS--Day15 (ES6 nuevo + deportes)

Un set

①conjunto: conjunto, sin subíndice, deduplicación automática (los elementos duplicados no se pueden almacenar)

②add (parámetro) Agrega un elemento a la colección

eliminar (valor) eliminar un número en la colección

has(value) Determina si un valor está contenido en la colección.

clear() borra la colección

③ atravesar

for(let item of set){ console.log(item); }

④Deduplicación de matrices

let arr = [1,1,2,3,4,5,2,5,7];

let set = new Set(arr);

⑤ Convertir conjunto en matriz

arr = Array.from(set);

consola.log(arr);

⑥Tamaño de conjunto de longitud de matriz

let set = new Set([1,1,2,3,4,5,2,5,7]);

consola.log(establecer.tamaño);

2. mapa

①mapa: Mapeo, que almacena datos en forma de pares clave-valor.

let mapa = nuevo Mapa();

②set(clave,valor) Agrega un elemento al conjunto: si existe la clave, se cambia, si no existe, se agrega

get(clave) obtiene el valor de acuerdo con la clave

delete(tecla) elimina un número de la colección

has(key) determina si un valor está contenido en la colección

clear() borra la colección

  for(let item of map){
        //item是一个数组，0代表的是key,1是value
        console.log(item);
    }

3. Operador inverso...

    let arr1 = [1,2,3,4];
    //let arr2 = arr1;//赋值的是地址
    let arr2 = [...arr1];//扩展运算符
    arr2[0] = 999;
    console.log(arr1);

4. Cadena de plantilla``

  var oUl = document.querySelector("ul");
    //为啥要反引号定义字符串，支持换行！！！
    oUl.innerHTML = `<li>123</li> 
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>`;
    for(let i=0; i<10; i++){
        //在模板字符串中出现的变量，需要用${}包裹
        oUl.innerHTML += `
            <li>${i}</li>
        `
    }

5. Estuche deportivo

(movimiento uniforme, encapsulación, movimiento alternativo uniforme, movimiento transparente uniforme, movimiento intermedio)

//①匀速运动====================================================================

    //运动的编写思想:
    //1.关闭定时器
    //2.启动定时器
    //3.根据条件终止定时器
    let oBox = document.querySelector("#box");
    let oBtn = document.querySelector("button");
    let time = null;
    oBtn.onclick = function(){
        clearInterval(time);
        time = setInterval(function(){
            oBox.style.left = oBox.offsetLeft + 5 + "px";
            if(oBox.offsetLeft == 400){
                clearInterval(time);
            }
        },50);
    }


//②封装========================================================================
    let oBox = document.querySelector("#box");
    let oBox1 = document.querySelector("#box1");
    let oBtn = document.querySelector("button");
    let time = null;
    function startMove(obj){
        clearInterval(time);
        time = setInterval(function(){
            obj.style.left = obj.offsetLeft + 5 + "px";
            if(obj.offsetLeft == 600){
                clearInterval(time);
            }
        },50);
    }
    oBtn.onclick = function(){
        startMove(oBox);
    }


//③匀速往返运动=================================================================
    let oBox = document.querySelector("#box");
    let oBtns = document.querySelectorAll("button");
    let time = null;
    function startMove(obj,target){
        clearInterval(time);
        time = setInterval(function(){
            let speed = obj.offsetLeft > target ? -5:5;
            obj.style.left = obj.offsetLeft + speed + "px";
            if(obj.offsetLeft == target){
                clearInterval(time);
            }
        },50);
    }
    oBtns[0].onclick = function(){
        startMove(oBox,0);
    }
    oBtns[1].onclick = function(){
        startMove(oBox,600);
    }


//④匀速透明运动=================================================================
    let oBox = document.querySelector("#box");
    let time = null;
    function startMove(obj,target){
        clearInterval(time);
        time = setInterval(function(){
            let speed = getComputedStyle(obj,false)["opacity"] > target ? -0.01:0.01;
            obj.style.opacity = getComputedStyle(obj,false)["opacity"]/1 + speed;
            if(getComputedStyle(obj,false)["opacity"] == target){
                clearInterval(time);
            }
        },50);
    }
    oBox.onmouseover = function(){
        startMove(oBox,1);
    }
    oBox.onmouseout = function(){
        startMove(oBox,0);
    }


//⑤缓冲运动=====================================================================
    let oBox = document.querySelector("#box");
    let oBtn = document.querySelector("button");
    let time = null;
    function startMove(obj,target){
        clearInterval(time);
        time = setInterval(function(){
            let speed = (target-obj.offsetLeft)/10;
            //取整
            speed =  speed>0 ? Math.ceil(speed) : Math.floor(speed);
            obj.style.left = obj.offsetLeft + speed + "px";
            console.log(speed);
            if(obj.offsetLeft  == target){
                clearInterval(time);
            }
        },50);
    }
    oBtn.onclick = function(){
        startMove(oBox,1000);
    }


//============================================================================
//============================================================================
//五星好评
 let oLis = document.getElementsByTagName("li");
    for(let i=0; i<oLis.length; i++){
        oLis[i].onmouseover = function(){
            for(let j=0; j<oLis.length; j++){
                if(j<=i){
                    oLis[j].style.backgroundPosition = "0 -27px";
                }else{
                    oLis[j].style.backgroundPosition = "0 0";
                }
            }
        }
        oLis[i].onclick = function(){
            for(let j=0; j<oLis.length; j++){
                oLis[j].onmouseover = null;
            }
        }
    }