JavaScript之函数

最新推荐文章于 2024-10-09 09:16:31 发布

是橘小米呀~

最新推荐文章于 2024-10-09 09:16:31 发布

阅读量268

点赞数

分类专栏： javascript 文章标签： javascript 函数

本文链接：https://blog.csdn.net/summer_lover_/article/details/54837123

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

函数实质上就是可以作为一个逻辑单元对待的一组JavaScript代码。使用函数可以使代码更为简洁，提高重用性。在JavaScript中，大约95%的代码都包含在函数中。由此可见，函数在JavaScript中是非常重要的。

一.函数的简单调用：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8" />
		<title>my js</title>
		<script type="text/javascript">
			function print(s1,s2,s3){
				alert(s1+s2+s3);
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			print("i ","love ","you");
		</script>
	</body>
</html>

显示结果如下：

二.在时间响应中调用函数：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8" />
		<title>my js</title>
		<script type="text/javascript">
			function test(){
				alert("test");
			}
		</script>
	</head>
	<body>
		<form action="" method="post">
			<input type="button" value="提交" οnclick="test();">
		</form>
	</body>
</html>

点击提交按钮显示如下对话框：（在按钮onclick事件中调用test函数）

三.通过链接调用函数：

在<a>标签中的href标记中使用“javascript:关键字”链接来调用函数，当用户点击该链接时，相关函数将被执行。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8" />
		<title>my js</title>
		<script type="text/javascript">
			function test(){
				alert("forever love");
			}
		</script>
	</head>
	<body>
		<a href="javascript:test();">这是一条链接请点击</a>
	</body>
</html>

执行此代码后，出现一条链接，点击该链接后弹出一条对话框：

四.关于函数的返回值：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8" />
		<title>my js</title>
		<script type="text/javascript">
			function setValue(num1,num2,num3){
				var ave=(num1+num2+num3)/3;
				return ave;        //返回ave变量
			}
			function getValue(num1,num2,num3){
				document.write("参数分别为："+num1+","+num2+","+num3+".<br>");
				var value=setValue(num1,num2,num3);            //调用setValue()函数
				document.write("三个参数的平均值为："+value+".");
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			getValue(50,60,70);
		</script>		
	</body>
</html>

显示结果如下：

五.嵌套函数（在函数内部再定义一个函数）：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8" />
		<title>my js</title>
		<script type="text/javascript">
			var out=10;    //定义全局变量
			function add(num1,num2){       //定义外部函数
				function inadd(){         //定义内部函数
					alert("参数的和为："+(num1+num2+out));       //求参数的和
				}
				inadd();     //调用内部函数
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			add(10,10);     //调用外部函数
		</script>		
	</body>
</html>

运行结果如下：

六.递归函数：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8" />
		<title>my js</title>
		<script type="text/javascript">
			function func(num){     //定义递归函数
				if(num<=1)
					return 1;        
				else
					return func(num-1)*num;      //调用递归函数
					
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			alert("10！是"+func(10));       //调用函数
		</script>		
	</body>
</html>

运行结果如下：