【作业】闭包及回收机制，生命周期

【闭包】

c是a的局部变量，a中的函数b使用了c，就叫做闭包。

【回收机制】

回收了~！~！~！

【生命周期】

但如果是 window.k 就会因为 k 一直随着window 一直活着，f 啊 b 啊就都跟着一直活着。

定时器 function 那个地方，不用每次写个匿名函数，里面调用函数，可以直接写一个函数变量是可以的。

红框的地方，不应该有括号，因为你要绑定的是个函数对象，a本身就是函数对象，a（）那是在调用函数。所以a（）是不对的，而应该只是a而已，就对了。

如果你写成了a（），她就去调用了a函数，会去取得a函数的 return 值（返回值），但是没有return时候，就会返回默认的返回值，而js里面的默认返回值为 undefined 所以一直点击起来没有反应。

随机数， Math.random 返回的 0 到 1 的随机数。

之前那个抖动的作业，关于位移的移动，就可以不用写成死值了，可以使用随机数。随机生成位移的偏移量。

【作业】

【我的实现】

【作业1】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        body{
            background-color: rgb(11, 22, 33);
        }
    </style> -->
</head>
<body>
    <script type="text/javascript">

        
        window.onresize = function(){

            // document.body.style.backgroundColor = "rgb(11, 22, 33)";

            let a = Math.random()* 255;
            let ab = Math.random()* 255;
            let abc = Math.random()* 255;
            // console.log(a * 255);
            // console.log(ab * 255);
            // console.log(abc * 255);
            // console.log(a);
            // console.log(ab);
            // console.log(abc);

            document.body.style.backgroundColor = "rgb("+a+", "+ab+", "+abc+")";
            // document.body.style.backgroundColor = "#FFCC80";

        }


    </script>
</body>
</html>

【作业二】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script type="text/javascript">
       
    //    setInterval(() => {
    //         let num = 4;
    //         let rnd = Math.floor(Math.random() * num)
    //         console.log(rnd);
           
    //    }, 50);
        div1.onmouseover = function() {
            let num = 4;
            let rnd = Math.floor(Math.random() * num);
            let offsetL = 0;
            let offsetT = 0;
            switch(rnd){
                case 0 : 
                    offsetL = 100;
                    offsetT = 100;
                    break;
                case 1 : 
                    offsetL = -100;
                    offsetT = 100;
                    break;
                case 2 : 
                    offsetL = 100;
                    offsetT = -100;
                    break;
                case 3 : 
                    offsetL = -100;
                    offsetT = -100;
                    break;
                default :
                    break;
            }

            let left = ( div1.offsetLeft +200 ) > window.innerWidth ? 1 :( offsetL + 100 ) ;
            let top = ( div1.offsetTop +200 ) > window.innerHeight ? 1 : ( offsetT + 100 );
            // console.log("11==="+left);
            left = left <= 0? (window.innerWidth - 100) : left;
            top = top <= 0? (window.innerHeight - 100) : top;
            // console.log("222==="+left);
            div1.style.left = left + "px" ;
            div1.style.top = top + "px" ;
        }
        
    </script>
</body>
</html>

【作业三】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{
            position:absolute;
            background-color: sandybrown;
            width: 100px;
            height: 100px;
            left: 60px;
            top:60px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="div1">123</div>
    <script type="text/javascript">
       
        setInterval(() => {
            let offsetl = 0;
            let offsett = 0;
            if((Math.floor(Math.random()*2))==0){
                offsetl = 1;
            }else{
                offsetl = -1;
            }
            if((Math.floor(Math.random()*2))==0){
                offsett = 1;
            }else{
                offsett = -1;
            }
            let rl = Math.random()*10;
            let rt = Math.random()*10;
            div1.style.left = ((div1.offsetLeft + offsetl*rl)>0? (div1.offsetLeft + offsetl*rl):0)+ "px";
            div1.style.top = ((div1.offsetTop + offsett*rl)>0? (div1.offsetTop + offsett*rl):0)+ "px";
        }, 30);
        
    </script>
</body>
</html>

【老师的实现】

【注意的】

【作业1】