JS--Day15 (ES6 new + sports)

One.set

①set: set, no subscript, automatic deduplication (duplicate elements cannot be stored)

②add (parameter) Add an element to the collection

delete(value) delete a number in the collection

has(value) Determines whether a value is contained in the collection

clear() clears the collection

③ traverse

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

④Array deduplication

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

let set = new Set(arr);

⑤ Convert set to array

arr = Array.from(set);

console.log(arr);

⑥Array length set.size

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

console.log(set.size);

Two. map

①map: Mapping, which stores data in the form of key-value pairs.

let map = new Map();

②set(key,value) Add an element to the set: if the key exists, it is changed, if it does not exist, it is added

get(key) get the value according to the key

delete(key) delete a number in the collection

has(key) determines whether a value is contained in the collection

clear() clears the collection

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

Three. Inverse operator...

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

4. Template string``

  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. Sports case

(uniform motion, encapsulation, uniform reciprocating motion, uniform transparent motion, buffer motion)

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

    //运动的编写思想:
    //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;
            }
        }
    }