js基础函数的定义与使用

最新推荐文章于 2022-01-22 15:45:23 发布

爱不离@cc

最新推荐文章于 2022-01-22 15:45:23 发布

阅读量249

点赞数

分类专栏： js 文章标签：函数定义函数封装

本文链接：https://blog.csdn.net/aibuli1/article/details/100076094

版权

js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

函数的定义与使用

函数：是被设计为执行特定任务的代码块，一次封装后可多次调用。在函数中有两种方式可以定义一个函数，一个是函数声明，一个是函数表达式。

定义函数(函数声明)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>

爱不离@cc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础函数的定义与使用

函数的定义与使用函数：是被设计为执行特定任务的代码块，一次封装后可多次调用。在函数中有两种方式可以定义一个函数，一个是函数声明，一个是函数表达式。定义函数(函数声明)1：其中a，b为形参 4,5为实参,在函数中，参数是局部变量。function hanshu(a,b){ var num = a*b; console.log(num)}hanshu(4,5);//函数调用...
复制链接

扫一扫