本文详细介绍了JavaScript中函数的使用，包括何时需要函数返回值、如何返回多个值及注意事项。同时，讲解了获取非行间样式的两种方法，分别适用于标准浏览器和IE低版本。此外，还探讨了函数封装的步骤以及代码复用的重要性。最后，阐述了定时器的分类，如延时定时器和间歇定时器，并展示了如何清除定时器。
函数返回值
-
什么时候需要函数返回值
-
函数外想要使用函数内部的变量的时候
-
-
语法：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>
扫一扫
2634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
