【闭包】
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】
数字 ⇒ 字符串 ⇒ 截取整数位
* 256 而不是 * 255 (要不然呢,很难出现255的,所以需要 * 256)
另就是不知道是一位数,两位数,还是三维数的,这个时候可找小数点,找到位数,再去截取。
而且~~
忘记了!!!
哦 我想说 Math.floor 也可以取整数!!
或者 parseInt(小数 字符串 )
【作业2】
是一接触到,就跑到整个屏幕的一个其他随机生成数字的一个地方
【作业3】
这样就可以 随机生成 正负数
另
定时器 不光光 需要设置
还需要消灭
老师的代码里 设置了一个 抖动按钮
点击 按钮时候 要清一下、
而且 抖动十次时候,也要清一下定时器