JS--Day15(ES6新增+运动)

一.set

①set:集合,没有下标，自动去重（不能存储重复元素）

②add(参数) 向集合中添加一个元素

delete(值) 删除集合中某个数

has(值) 判断集合中是否含有某个值

clear() 清空集合

③遍历

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

④数组去重

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

let set = new Set(arr);

⑤将set转换为数组

arr = Array.from(set);

console.log(arr);

⑥数组长度set.size

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

console.log(set.size);

二.map

①map:映射，通过键值对的方式，存储数据。

let map = new Map();

②set(key,value) 向集合中添加一个元素:key以存在，则为改，不存在则为增

get(键) 根据键去取值

delete(键) 删除集合中某个数

has(键) 判断集合中是否含有某个值

clear() 清空集合

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

三.逆运算符...

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

四.模板字符串``

  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>
        `
    }

五.运动案例

(匀速运动、封装、匀速往返运动、匀速透明运动、缓冲运动)

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

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