day07定时器和函数封装
1.回顾
1.如何实现单组开关灯效果 使用场景 就是一个标签有两种状态 并且是来回切换状态 实现步骤 1.创建一个添加 var tag = true/false 2.if(tag==true){ 要做开的效果 更改tag的值为false }else{ 做关的效果 更改tag的值为true } 2.什么是全局变量/全局函数 在函数外侧声明的变量和函数 可以在任何地方访问和修改 会一直存储在内存中 直到页面关闭销毁 3.作用域链 是js的一种查找机制 先找自己作用域内的变量 依次往父级查找,直到全局作用域(window) 如果全局作用域还找不到 就会出现报错信息 xxx is not defined 4Number(要转换的内容) 先将数据转换成number类型 boolean类型(true-1 false-0) string类型(纯数字 "") null(0) 其他都是NaN
2.函数返回值
2.1return 返回值
-
return 值 return一次只能返回一个值 多个值返回有数组或者对象
-
return除了有返回值的作用 还有结束函数执行的作用
return [a,b] console.log(123)
2.2 获取非行间样式
2.2.1获取行间样式
-
标签.style.样式名 如果样式名是-链接 使用驼峰命名 例如font-size fontSize
-
==标签.style.样式名 只能获取行间样式==
-
// 1.获取行间样式 // 标签.style.样式名 只能获取行间样式 var oDiv = document.getElementsByTagName("div")[0]; console.log(oDiv.style.color);// "pink" console.log(oDiv.style.width);//""
2.2.2获取非行间样式和行间样式
-
标准浏览器(火狐 谷歌 欧朋 safari IE(9-11))
-
window.getComputedStyle(标签).样式名
// 标准浏览器 window.getComputedStyle(标签).样式名 var w = window.getComputedStyle(oDiv).width; console.log(w);// 300px var h = window.getComputedStyle(oDiv).height; console.log(h);// 300px var bgcolor = window.getComputedStyle(oDiv).backgroundColor console.log(bgcolor);//rgb(255, 0, 0) var color = window.getComputedStyle(oDiv).color; console.log(color);// rgb(255, 192, 203) var ftsize = window.getComputedStyle(oDiv).fontSize; console.log(ftsize);//50px
-
-
IE低版本浏览器(IE5-8)
-
标签.currentStyle.样式名
// IE低版本 标签.currentStyle.样式名 var w1 = oDiv.currentStyle.width; console.log(w1);// 300px var h1 = oDiv.currentStyle.height; console.log(h1);// 300px var bgcolor1 = oDiv.currentStyle.backgroundColor; console.log(bgcolor1);// red var color1 = oDiv.currentStyle.color; console.log(color1);// pink var ftsize1 = oDiv.currentStyle.fontSize; console.log(ftsize1);// 50px
-
-
兼容
-
判断方法1 window.getComputedStyle这个方法是否存在
// 1.判断浏览器 判断用户是运行在标准浏览器 还是IE低版本浏览器 /* 标准浏览器(谷歌 火狐 欧朋 safari ie(9-11)) window.getComputedStyle.样式名 IE低版本(ie5-8) 标签.currentStyle.样式名 window.getComputedStyle //这是js内置的一个方法(函数) */ console.log(window.getComputedStyle);//标准浏览器输出 ƒ getComputedStyle() { [native code] } IE低版本浏览器 undefined console.log(Boolean(window.getComputedStyle));// true console.log(Boolean(undefined));//false //判断方法1 window可以省略 但是作为判断条件的时候不能省略 if (window.getComputedStyle) {//true 会隐式转换成布尔类型 console.log("标准浏览器") var w = window.getComputedStyle(oDiv).width; console.log(w) } else {//false console.log("IE低版本浏览器"); var w = oDiv.currentStyle.width; console.log(w); }
-
判断方法2 判断 标签.currentStyle 这个方法是否存在
<script> var oDiv = document.getElementsByTagName("div")[0]; /* 标准浏览器(谷歌 火狐 欧朋 safari ie(9-11)) window.getComputedStyle.样式名 IE低版本(ie5-8) 标签.currentStyle.样式名 */ //判断方法2 console.log(oDiv.currentStyle)//IE低版本输出 [object Object] 标准浏览器undefined if(oDiv.currentStyle){//true IE低版本浏览器 console.log("IE低版本") var w = oDiv.currentStyle.width; console.log(w); }else{//false 标准浏览器 console.log("标准浏览器") var w = window.getComputedStyle(oDiv).width; console.log(w); } </script>
-
3.函数封装与代码复用
3.1 函数封装
函数封装的步骤
-
声明一个函数 把主要代码放进去
-
找函数中可变的值作为参数 将参数带入函数中 并且返回出去
-
调用调试
<body> <div style="color:pink;font-size: 50px;"></div> <p style="width:500px"></p> <script> var oDiv = document.getElementsByTagName("div")[0]; /* 函数封装 1.声明一个函数 把主要代码放进去 2.找函数中可变的值作为参数 将参数带入函数中 并且返回出去 3.调用调试 */ function getStyle(elem, attr) { //elem 标签元素 attr是样式名 // 1.判断浏览器 if (window.getComputedStyle) {//true 标准浏览器 var w = window.getComputedStyle(elem)[attr]; return w } else {//false IE浏览器 var w = elem.currentStyle[attr]; return w; } } //获取div的样式 var a = getStyle(oDiv, "width"); console.log(a);//300px var b = getStyle(oDiv, "height") console.log(b);//300px //获取p的样式 var oP = document.getElementsByTagName("p")[0]; var a1 = getStyle(oP, "width"); console.log(a1);//500px </script>
3.2 代码复用
-
什么时候使用代码复用
-
功能一样 结构一样的使用 用for循环不好实现的时候
-
-
代码复用的实现步骤
-
把这个功能先当成一组去实现 里面的标签都是通过父元素获取
-
先去实现一组的功能
-
把这一组功能放入到函数中 把父元素作为参数
-
调用测试
-
<script> /* - 把这个功能先当成一组去实现 里面的标签都是通过父元素获取 - 先去实现一组的功能 - 把这一组功能放入到函数中 把父元素作为参数 - 调用测试 */ //1.获取元素 var list = document.getElementsByTagName("li"); // //第一个li // add(list[0]) // add(list[1]) // add(list[2]) // add(list[3]) for (var i = 0; i < list.length; i++) { add(list[i]); } // 5.声明一个函数 function add(parent) { //2.通过父元素获取li里面的标签 var btn = parent.getElementsByTagName("button"); var oSpan = parent.getElementsByTagName("span"); // 3.点击+ btn[1].onclick = function () { // 只要是从页面获取内容都是string类型 oSpan[0].innerHTML++;// ++ 会自动隐式转换 // oSpan[0].innerHTML = Number(oSpan[0].innerHTML)+1 + 不会隐式转换 oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2) } // 4.点击- btn[0].onclick = function () { oSpan[0].innerHTML--;//-- 也会隐式转换 if (oSpan[0].innerHTML < 0) { oSpan[0].innerHTML = 0 } oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2) } } </script>
4.定时器
4.1 定时器介绍
-
定时器的分类
-
延时定时器
-
语法: setTimeout(函数,时间)
-
作用: 延迟一定的时间再去执行函数里面的代码,只会执行一次
-
使用场景 :广告弹窗
-
-
间歇定时器
-
语法:setInterval(函数,时间)
-
作用:每隔一定的时间就去执行函数中的代码 会执行多次
-
使用场景:轮播图 倒计时 计时器 抽奖
-
-
-
==注意:定时器的时间单位是ms 1s = 1000ms==
4.2 延时定时器
-
setTimeout(函数,时间)
<script> // 1.延时定时器 console.log("开始"); setTimeout(function(){ console.log("3秒之后才会执行这里的代码") },3000) // 2.广告弹窗 3秒之后开始显示广告弹窗 var oDiv = document.getElementsByTagName("div")[0]; setTimeout(function(){ oDiv.style.display = "block"; },3000) // 3.定时器中的函数可以提前定义 setTimeout(fn1,3000); function fn1(){ console.log("你一会输出123"); } </script>
4.3 间歇定时器
-
setInterval(函数,时间)
<body> <div>0</div> <script> // 1.间歇定时器 setInterval(function () { console.log("我隔一会就执行") }, 3000) // 2.函数可以提前定义 function fn1() { console.log(123); } setInterval(fn1, 3000); // 3.页面数字累加 每隔1秒+1; var oDiv = document.getElementsByTagName("div")[0]; setInterval(function () { oDiv.innerHTML++; }, 1000) </script> </body>
4.4 同步和异步(了解)
-
代码的执行执行顺序
<script> /* 同步执行:在做一件事情的时候 如果这件事没有做完,后面的代码就只能等待 同步执行 alert() for 异步执行:在做一件事情的时候 如果这件事需要花费一定的时间 会先执行后面的代码,然后再回头执行处理这件事 */ //同步执行 alert("提示"); console.log(123); for(var i = 0;i<10000;i++){ } console.log(456) // 异步执行 setTimeout就是一个异步执行 无论时间是多少 console.log("开始"); setTimeout(function(){ console.log(123); },0) console.log("结束") </script>
4.5清除定时器
-
定时器一旦开始就不会自动结束,必须手动清除
-
clearTimeout(定时器id) 手动清除延时定时器(很少用)
-
clearInterval(定时器id) 手动清除间歇定时器
-
-
定时器id: 每一个定时器在开始的时候,js都会返回一个能唯一标识当前定时器的id,默认都是从1开始
-
==定时器一旦停止就没有了,如果后续需要定时器 需要再次定义==
<body> <script> // 1 定时器id var a = setInterval(function(){},1000); console.log(a); var b = setInterval(function(){},1000); console.log(b); var c = setInterval(function(){},1000); console.log(c); clearInterval(c); // 2.倒计时效果 倒计时是从10开始 到0停止 var n = 10; auto();//为了解决定时器第一次执行的延迟 可以提前调用函数 function auto(){ // 将结果显示在页面上 document.body快速获取body标签 document.body.innerHTML = n; n--; if(n<0){ clearInterval(timer);//清除定时器 } } var timer = setInterval(auto,1000) </script> </body>
-
自动切换图片
<body> <img src="./img/1.jpg" alt=""> <script> // 1.获取元素 var oImg = document.getElementsByTagName("img")[0]; var arr = [ "./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg", ] var n = 0; function auto() { n++; if (n > 3) { n = 0; } oImg.src = arr[n]; } // 每隔1秒切换一张图片 var timer = setInterval(auto, 1000) // 2.滑入图片 停止定时器 oImg.onmouseover = function () { // 停止定时器 clearInterval(timer) } // 2.滑出图片 开启定时器 oImg.onmouseout = function () { // 定时器一旦停止就没有了,如果后续需要定时器 需要再次定义 timer = setInterval(auto, 1000) // 如果带var 就变成局部变量 } </script> </body>
5.面试题
1-如何清除定时器 - clearTimeout(定时器id) 手动清除延时定时器(很少用) - clearInterval(定时器id) 手动清除间歇定时器 2-什么是同步和异步 同步执行:在做一件事情的时候 如果这件事没有做完,后面的代码就只能等待 异步执行:在做一件事情的时候 如果这件事需要花费一定的时间 会先执行后面的代码,然后再回头执行处理这件事 3-代码复用实现的步骤是什么? 代码复用的实现步骤 - 把这个功能先当成一组去实现 里面的标签都是通过父元素获取 - 先去实现一组的功能 - 把这一组功能放入到函数中 把父元素作为参数 - 调用测试 4-return可以返回哪些数据类型 number string boolean undefined null