js基础 函数的定义与使用
程序员文章站
2022-06-30 19:18:46
...
函数的定义与使用
函数：是被设计为执行特定任务的代码块，一次封装后可多次调用。在函数中有两种方式可以定义一个函数，一个是函数声明，一个是函数表达式。
定义函数(函数声明)1：其中a，b为形参 4,5为实参,在函数中，参数是局部变量。
function hanshu(a,b){
var num = a*b;
console.log(num)
}
hanshu(4,5);//函数调用定义函数(函数表达式)2：函数声明和函数表达式都是用来定义一个函数的，区别就是函数声明存在函数声明，可以在声明前调用。而函数表达式则必须在赋值语句之后再调用。
//Function(1,2)，在这里调用会报错。
var Function = function (a, b) {
return a * b
};
Function(1,2)//函数调用当 JavaScript 到达 return 语句，函数将停止执行。
function hanshu1(a,b){
return a*b;
console.log("这个是打印不出来的");
}
hanshu1(5,6);
console.log(hanshu1(5,6));我们使用函数是为了减少代码的重复，能够写一次代码多次使用，下面一个小例子（tab切换的封装）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;padding:0;list-style: none;}
body{
padding: 20px;
}
.box{
width: 416px;
margin-top: 20px;
}
.box>ul{
overflow: hidden;
}
.box>ul>li{
float: left;
width: 100px;
line-height: 45px;
border:1px dashed blue;
text-align: center;
margin-left: 1px;
margin-right: 1px;
background: #000;
color: #fff;
}
.box>ul>.ul_active{
background: red;
}
.box>ol>li{
width: 416px;
height: 400px;
background: rgba(82,226,152,0.5);
display: none;
margin-top: 5px;
}
.box>ol>.ol_active{
display: block;
}
</style>
</head>
<body>
<div class="box" id="box1">
<ul>
<li class="ul_active">男装</li>
<li>女装</li>
<li>童装</li>
<li>老年装</li>
</ul>
<ol>
<li class="ol_active">男装大降价，一件五块、两件六块。</li>
<li>女装甩卖了，100五件，随便挑随便选。</li>
<li>童装买一送二，买二送五了！！！</li>
<li>男装大降价，一件五块、两件六块。</li>
</ol>
</div>
<div class="box" id="box2">
<ul>
<li class="ul_active">男装</li>
<li>女装</li>
<li>童装</li>
<li>老年装</li>
</ul>
<ol>
<li class="ol_active">男装大降价，一件五块、两件六块。</li>
<li>女装甩卖了，100五件，随便挑随便选。</li>
<li>童装买一送二，买二送五了！！！</li>
<li>男装大降价，一件五块、两件六块。</li>
</ol>
</div>
<script>
function tab(id){
var box = document.getElementById(id);
var ullis = box.children[0].children;
var ollis = box.children[1].children;
var len = ullis.length;
for(var i=0;i<len;i++){
ullis[i].index = i;//将i赋值给ullis[i].index
ullis[i].onclick = function(){
for(var j=0;j<len;j++){//这一层循环把所有样式清空
ullis[j].className = "";
ollis[j].className = "";
}
//最外层循环给当前点击的li 添加样式
this.className = "ul_active";
ollis[this.index].className = "ol_active";
}
}
}
tab("box1");
tab("box2");
</script>
</body>
</html>
下一篇： 帧动画的创建方式 - 纯Java代码方式