javascript函数之function的用法笔记

原创 PHP笔记  2017-03-31 17:37  阅读 1,062 views 次

函数是可以重复使用的代码块,它本身不会自动执行,只有在调用它时才会执行。

js函数语法

格式:

function函数名(){//声明函数
函数体
}
函数名();//调用函数

实例:

<script type="text/javascript">
function fun(){
alert("function函数演示");
}
fun();//调用函数
</script>

打印结果:function函数演示

说明:javascript区分大小写,关键词function必须是小写,函数名称的大小写必须与调用时函数名称大小写一致。

function函数返回值

有的时候,我们希望函数将处理的结果返回,这个时候就会用到return语句了。当程序遇到return语句时,函数会停止执行,并返回指定的值。

格式:

function 函数名(){
......
return 返回的值;
}

实例:

<script type="text/javascript">
function fun(){
var a=1;
return a;
}
var b=fun();//接收函数返回的值,b的值为1
</script>

function函数参数

为了函数的灵活性,函数还可以传递参数。

1、指定参数个数

格式:

function 函数名(参数1,参数2,......){
函数体;
}
fun(值1,值2,......);

实例:

<script type="text/javascript">
function add(a,b){
var c=a+b;
return c;
}
var b=add(2,4);
alert(b);
</script">

打印结果:6

说明:函数要多少个参数,调用时就得传递几个参数。

2、不指定参数个数

格式:

function 函数名(){
arguments[i];//i=0,1,2,3,......
}
fun(值1,值2,......);

实例:

<script type="text/javascript">
function add(){
var i=0;
var c=0;
while(arguments[i]){
c=c+arguments[i];
i++;
}
return c;
}
var b=add(1,2,4,3);
alert(b);
</script>

打印结果:10

说明:arguments[]可以读取调用函数时传递过来的参数。

综合实例

简单计算器:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/hmtl; charset=utf-8" ><!--PHP中午乱码处理-->
<title>js_PHP笔记</title>
<script type="text/javascript">
var i=document.getElementsByTagName("input");
var ii=document.getElementsByTagName("span");
function add(){//加
ins(Number(i[0]["value"])+Number(i[1]["value"]));

}
function minus(){//减
ins(Number(i[0]["value"])-Number(i[1]["value"]));
}
function multiply(){//乘
ins(Number(i[0]["value"])*Number(i[1]["value"]));
}
function divide(){//除
ins(Number(i[0]["value"])/Number(i[1]["value"]));
}
function ins(a){
ii[0].innerHTML=a;
}
</script>
</head>
<body align="center">
<h1>简单计算器</h1>
数一:<input type="text" id="first" /><br/><br/>
数二:<input type="text" id="second" /><br/><br/>
结果:<span>00</span><br/><br/>
<button onclick="add()" style="width:50px;height:50px" >加</button>&nbsp;
<button onclick="minus()" style="width:50px;height:50px">减</button>&nbsp;
<button onclick="multiply()" style="width:50px;height:50px">乘</button>&nbsp;
<button onclick="divide()" style="width:50px;height:50px">除</button>&nbsp;
</body>
</html>

运行结果:

本文地址:https://www.ggbiji.com/js-function.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情