函数返回值
-
什么时候需要函数返回值
-
函数外想要使用函数内部的变量的时候
-
-
语法:return 返回值
//1.什么时候会需要函数返回值 函数外面想使用函数内部的值的时候 function fun1() { var a = 10; function fun2() { console.log("fun2"); } return a; } var b = fun1(); console.log(b);// 10 // 2.函数返回值 return 返回值 function fun1() { function fun2() { console.log("fun2"); } return fun2 } var c = fun1(); console.log(c);//c = function fun2(){} c();
-
==注意事项==
-
函数中return一次只能返回一个,如果写多个,返回最后一个;
-
函数中只能有一个return
-
reutrn除了有返回值的作用 还是有结束函数的作用 所以把return放在函数的最后
-
// 3.return一次只能返回一个值 如果写多个只能返回最后一个 function fun3(a, b) { //计算a+b a-b var h = a + b; var j = a - b; // return h,j 只能写法不行 只能返回j // reutrn返回多个值 [返回值1,返回值2] {"和":返回值1,"差":返回值2} // return [h, j]; return { "he": h, "cha": j } } var res = fun3(20, 30); console.log(res);//[50,-10] {"he":50,"cha":-10} // 4.return不仅有返回值的作用 还有结束函数的作用 所以把return放在函数的最后 function fun4() { return 20; console.log("你就说我执行吗");//不会执行 } var res1 = fun4(); console.log(res1); function fun5() { return 10; return 20;//不会执行 } var a = fun5(); console.log(a);//10
-
返回值的类型 可以是任意数据类型
// 4.return 返回值 返回值的类型 任何数据类型都可以返回 function fun6() { return "1"; return 1; return null; return undefined; return []; return {}; return function () { }; }
2.2获取非行间样式
-
获取行间样式
-
获取:标签.style.样式名 font-size fontSize
-
设置:标签.style.样式名 = 值
-
-
获取非行间样式
-
标准浏览器(欧朋 火狐 谷歌 safai,IE(9+))
-
window.getComputedStyle(标签).样式名
-
//1.标准浏览器 window.getComputedStyle("标签").样式名 所有的样式都可以拿到 var oDiv = document.getElementsByTagName("div")[0]; console.log(window.getComputedStyle(oDiv).backgroundColor);//rgb(255, 0, 0) console.log(window.getComputedStyle(oDiv).color);//rgb(255, 192, 203) console.log(window.getComputedStyle(oDiv).width);//300px console.log(window.getComputedStyle(oDiv).height);//300px
-
IE低版本浏览器(IE8-)
-
标签.currentStyle.样式名
-
// 2.IE低版本浏览器 ie8- 标签.currentStyle.样式名 所有的样式都可以拿到 console.log(oDiv.currentStyle.backgroundColor);//red console.log(oDiv.currentStyle.color);//pink console.log(oDiv.currentStyle.width);//300px console.log(oDiv.currentStyle.height);//300px
-
兼容
// 3.兼容 标准浏览器window.getComputed IE低版本浏览器:标签.currentStyle console.log(window.getComputedStyle);// 标准浏览器输出:ƒ getComputedStyle() { [native code] } IE低版本浏览器:undefined console.log(oDiv.currentStyle)//标准浏览器输出undefined IE低版本浏览器:[object Object] //4.判断是运行在IE低版本浏览器 还是运行在标准浏览器 if (window.getComputedStyle) {//true console.log("标准浏览器") window.getComputedStyle(oDiv).backgroundColor } else {//false console.log("IE低版本浏览器"); oDiv.currentStyle.backgroundColor } if (oDiv.currentStyle) { console.log("IE低版本") oDiv.currentStyle.backgroundColor } else { console.log("标准浏览器"); window.getComputedStyle.backgroundColor }
-
2.3函数封装
-
函数封装步骤
-
声明一个函数 将主要代码放入到这个函数中
-
找函数中可变的量作为参数
-
将参数代入到函数中 然后调用
-
function getStyle(elem, attr) { //var attr = "width" //elem 获取样式的标签 attr样式名 if (window.getComputedStyle) {//true // console.log("标准浏览器") return window.getComputedStyle(elem)[attr]; } else {//false // console.log("IE低版本浏览器"); return elem.currentStyle[attr]; } } var oP = document.getElementsByTagName("p")[0] console.log(getStyle(oDiv, "width")) console.log(getStyle(oDiv, "height")) console.log(getStyle(oP, "width"))
2.4代码复用
-
什么时候使用
-
结构一致 功能也一样
-
-
实现步骤
-
1.把他当成一组去实现,里面的标签通过父元素获取
-
2.先去实现一组的功能
-
3.把实现一组的功能放入到函数中 并且把父元素作为参数
-
4.调用测试
-
<ul> <li> <button>-</button> <span>0</span> <button>+</button> 单价: <span>199.99</span> 小计: <span>0.00</span> </li> </ul> <script> var oLi = document.getElementsByTagName("li"); // cart(oLi[0]); // cart(oLi[1]); // cart(oLi[2]); // cart(oLi[3]); // cart(oLi[4]); // cart(oLi[5]); for (var i = 0; i < oLi.length; i++) { cart(oLi[i]); } // 3.把实现一组的功能放入到函数中 并且把父元素作为参数 function cart(parent) { //1.里面的标签必须通过父元素获取 var btn = parent.getElementsByTagName("button"); var oSpan = parent.getElementsByTagName("span"); // 2.实现这一组的功能 // 点击+ btn[1].onclick = function () { oSpan[0].innerHTML++;//++会隐式转换 oSpan[2].innerHTML = (oSpan[0].innerHTML * oSpan[1].innerHTML).toFixed(2); } // 点击- 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>
3.定时器
3.1定时器的分类
-
延时定时器
-
语法:setTimeout(function函数,时间)
-
使用场景:广告弹窗
-
-
间歇定时器
-
语法:setInterval(function函数,时间)
-
使用场景:轮播图 倒计时 计时器 抽奖
-
3.2延时定时器/setTimeout
<script> //1.setTimeout(function(){},时间) 时间单位是ms(毫秒) 1000ms = 1s //1.基础用法 setTimeout(function () { console.log(1); }, 1000) // 2.function函数可以提前声明 function fun1() { console.log(2); } setTimeout(fun1, 2000) // 3.在定时器中 this指向window setTimeout(function () { console.log(this);//window }, 1000) </script>
3.3间歇定时器/setInterval
<script> //间歇定时器:setInterval(function(){},时间) //1.基础语法 setInterval(function () { console.log(1) }, 1000) // 2.可以将函数提前声明 setInterval(fun1, 1000) function fun1() { console.log(2); } // 3.setInterval中this 指向window setInterval(function () { console.log(this)//window }, 1000) </script>
3.4清除定时器
-
setTimeout 延时定时器 会自动清除定时器
-
setInterval 定时器一旦开启就不会自动结束 必须手动清除
-
语法:clearTimeout(定时器id) clearInterval(定时器id)
-
定时器id:每一个定时器在开启的时候都会返回一个唯一能标识当前定时器的id,id是从1开始的
<script> var a = setInterval(function () { }, 1000); console.log(a);//1 var b = setInterval(function () { }, 1000); console.log(b);//2 var c = setTimeout(function () { }, 3000); console.log(c);//3 clearInterval(a); clearInterval(b); clearTimeout(c); </script>