day09：定时器
目录
总结：
1.三种解绑事件
事件源.on事件类型 = null
事件源.removeEventListenner(“没有on的事件类型”，命名函数，false）
事件源.detachEvent(“没有on的事件类型”，命名函数）
2.事件冒泡
一定是盒子嵌套盒子，如果里面的盒子做了点击事件，外面的盒子和里面的盒子有相同的点击事件，外面的盒子也会触发----冒泡
满足条件：盒子嵌套，有相同事件
3.阻止事件冒泡
event.stopPropagation() event可以简写e，默认的事件对象—火狐和谷歌
window.event.cancelBubble = true 给ie低版本浏览器
4.事件委托(事件代理)
通俗一点就是事件冒泡的应用，就是自己的事不想干，叫它爸爸，甚至爷爷、甚至祖先来干。或者拿取快递来比喻都行
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。
5.事件的三个阶段
1、事件捕获：用数字代表是1（如果你看到了是数字1就是代表了捕获）— 从外到里
2、目标阶段：用数字代表是2（如果你看到了数字2就是目标阶段）—执行当前的元素
3、冒泡阶段:用数字代表是3（如果你看到了数字3就代表的是冒泡阶段）–从里到外
e.eventPhase 为了检测事件的三个阶段分别代表什么数字
一、最大的匿名函数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function () {//最大的匿名函数--也就是我们的入口函数，当页面加载完毕之后再执行里面的代码//（当页面加载的时候就是相当于先把body里面的内容都执行完毕了，再执行我们的JS）var btn = document.getElementById("btn");btn.onclick = function () {console.log("大家今天继续给力，优秀，棒棒哒.");}}</script>
</head><body><input type="button" value="按钮" id="btn">
</body></html>
二、定时器setInterval
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" value="清除定时器" id="btn"><script>/* 定时器：炸弹，闹钟（炸弹只炸一次）我们的定时器有两种:setInterval 和 setTimeoutsetInterval 使用场景轮播图效果 原子弹--不停的炸，--不停的执行下去,如果这个定时器不清除,他会一直执行。setTimeout ----- 会用在一次性的广告里面--现在很少见---炸弹第一、setInterval(匿名函数,时间)参数1:是一个匿名函数参数2：时间 单位是毫秒 1000毫秒--- 1秒 千分之一为单位*/var timeId = setInterval(function(){alert("嘎嘎，来点我呀");},2000);//2000代表2秒 就是2s//清除定时器var btn = document.getElementById("btn");//点击按钮来清除定时器btn.onclick = function(){// window.clearInterval(timeId); 我们把前面的定时器给了timeId// 扩展--工作里面推荐下面写法clearInterval(timeId);// 总结：清除定时器 window 是可以省略的，这个定时器是我们用的最多的}</script>
</body>
</html>
三、一起摇摆案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{position: absolute;/* 运动起来一定要有定位 */}img{width: 200px;height: 200px;}</style>
</head>
<body><input type="button" value="一起摇摆" id="btn1"><input type="button" value="停止摇摆" id="btn2"><div id="dv"><img src="images/1.jpg" alt=""><img src="images/2.jpg" alt=""></div><script src="publick.js"></script><script>var timeId = "";//全局变量my$("btn1").onclick = function(){timeId = setInterval(function(){// 定义一个随机数var x = parseInt(Math.random() *100 + 1);var y = parseInt(Math.random() *100 + 1);// 设置元素的left属性和top属性my$("dv").style.left = x + "px";my$("dv").style.top = y + "px";},10);//时间越小越快};// 停止定时器,清除定时器my$("btn2").onclick = function(){clearInterval(timeId);}// 现在不要去点击多次，点击多次会有bug的-----我们后面详细画图来讲解如何解决这个bug--轮播图的时候。</script>
</body>
</html>
四、亮起来案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 600px;height: 600px;border: 1px solid #000;background: black;position: relative;/*相对定位*/}span{position: absolute;/*绝对定位*/font-size: 50px;color:yellow}</style>
</head>
<body><input type="button" value="亮起来" id="btn"><div id="dv"></div><script src="publick.js"></script><script>my$("btn").onclick = function(){// 因为我们这个定时器没有做清除，所以没有给变量接收setInterval(function(){my$("dv").innerHTML = "<span>☆</span>";// 随机数var x = parseInt(Math.random() * 600 + 1);var y = parseInt(Math.random() * 600 + 1);my$("dv").firstElementChild.style.left = x + "px";my$("dv").firstElementChild.style.top = y + "px";},5);}</script>
</body>
</html>
五、美女时钟效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="" alt="" id="im"><script src="publick.js"></script><script>setInterval(function(){// 获取系统的日期时间var dt = new Date();// console.log(dt);// 获取小时var hour = dt.getHours();// 获取秒钟var second = dt.getSeconds();// 判断长度----三元运算符hour = hour < 10 ? "0" + hour : hour;second = second < 10 ?"0" + second : second;console.log(hour + "======" + second);//测试代码// 大招 "++" my$("im").src = "meimei/"+hour+"_"+second+".jpg";},1000);//1000毫秒就是等于1秒 1s</script>
</body>
</html>
六、进一步优化时钟
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="" alt="" id="im"><script src="publick.js"></script><script>function f1(){// 获取系统的日期时间var dt = new Date();// console.log(dt);// 获取小时var hour = dt.getHours();// 获取秒钟var second = dt.getSeconds();// 判断长度----三元运算符hour = hour < 10 ? "0" + hour : hour;second = second < 10 ?"0" + second : second;console.log(hour + "======" + second);//测试代码// 大招 "++" my$("im").src = "meimei/"+hour+"_"+second+".jpg";}f1();// 上来就调用一次函数，--核心思想setInterval(f1,1000);//1000毫秒就是等于1秒 1s//总结:我们的定时器里面可以是匿名函数，也可以是命名函数。</script>
</body>
</html>
七、渐变效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;background: pink;}</style>
</head>
<body><input type="button" value="渐变" id="btn"><div id="dv"></div><script src="publick.js"></script><script>var opacity = 10;//为了避免小数出现bug，我们给个10my$("btn").onclick = function(){var timeId = setInterval(function(){opacity--;//判断不要出现负数if(opacity <= 0){// 清除定时器clearInterval(timeId);}my$("dv").style.opacity = opacity / 10;//因为我们前面给了一个10},200);}</script>
</body>
</html>
八、定时器之setTimeout
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>/* 我们的定时器有两种:setInterval(函数,时间)----轮播图我们的setTimeout(函数,时间)---- 只执行一次，--弹出广告，到了时间就执行一次setTimeout(函数,时间)参数1:函数参数2：时间 单位是毫秒 1000毫秒等于1秒 1s*/window.onload = function(){var timeId = setTimeout(function(){alert("我只弹出一次");//就算你是弹出一次，我们要清除定时器---我们程序员约定--规范},1000);my$("btn").onclick = function(){clearTimeout(timeId);//定时器清除的----这样可以节省内容console.log("成功清除");//测试是否成功清除}}// 大总结：不管是哪个定时器setInterval()和setTimeout 都要清除定时器--规范--规定。</script><input type="button" value="清除定时器" id="btn">
</body>
</html>