JavaScript函数

2025-02-01 技术教程

1.概念

函数就是重复执行的代码片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script type="text/javascript">

function fnChange(){ alert("hello world!"); /*设置函数*/}function fnStyle(){ var oDiv = document.getElementById("div1"); oDiv.style.color = 'red'; oDiv.style.fontSize = '70px';}</script>

</head>

<body>

<div id="div1" onclick="fnChange()">123456</div> <input type="button" name="" value="点击" onclick = "fnStyle()">

</body>
</html>

2.提取行间事件

window.onload = function(){
var oBut = document.getElementById('btn01');
oBut.onclick = fnStyle; /将事件的属性和一个函数关联，函数不写小括号，写了会马上执行/
function fnStyle(){
var oDiv = document.getElementById("div1");
oDiv.style.color = 'red';
oDiv.style.fontSize = '70px';
}
}

</script>

</head>
<body>

<div id="div1" onclick="fnChange()">123456</div> <input type="button" name="" value="点击" id="btn01">

</body>

3.匿名函数

oBut.onclick = function(){
var oDiv = document.getElementById("div1");
oDiv.style.color = 'red';
oDiv.style.fontSize = '70px';
}; /匿名函数,直接赋予/

**4.网页换肤**

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../CSS/btn02.css" id="link01">
<script type="text/javascript">

window.onload = function(){ var oBtn01 = document.getElementById('btn01'); var oBtn02 = document.getElementById('btn02'); var oLink01 = document.getElementById('link01'); oBtn01.onclick = function(){ oLink01.href = "../CSS/btn02.css"; } oBtn02.onclick = function(){ oLink01.href = "../CSS/btn01.css"; }}</script>

<body>

<input type="button" name="" value="皮肤一" id="btn01"><input type="button" name="" value="皮肤二" id="btn02">

</body>
</html>

5.变量与函数预解析

JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并将var定义的变量声明提前，将它赋值为undefined，即定义前调用

6.函数传参

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>形参</title>
<script type="text/javascript">

window.onload = function(){ function fnChangestyle(myStyle,val){ /*形参*/ var oDiv = document.getElementById('div1'); oDiv.style[myStyle] = val; } fnChangestyle('color','red') /*实参*/}</script>

</head>

<body>

<div id="div1">123456</div>

</body>
</html>

函数‘return’关键字
（1）返回函数执行的结果
（2）结束函数的运行
（3）阻止默认行为

function fnAdd(a,b){
var c = a + b;
return c; /返回c值，结束函数/
}
var iNum = fnAdd(5,8);
alert(iNum);

7.加法运算

var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oBtn = document.getElementById('btn');

oBtn.onclick = function(){ var iVal01 = parseInt(oInput01.value); /*转化为实数*/ var iVal02 = parseInt(oInput02.value); alert(iVal01+iVal02); }

8.条件语句

通过条件来控制程序的走向，就需要用到条件语句。

运算符
（1）算术运算符：+、 -、、 /、 %（求余）
（2）赋值运算符：=、+=、-=、=、/=、%=、++等同于加一
（3）条件运算符：==、===、>、>=、<、 <=、 != &&(而且，和)、||（或者，与）、！（否）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>条件运算符</title>
<script type="text/javascript">

var iVal01 = 2; /*实数型*/var iVal02 = '2'; /*字符型*//*弹出相等，==，是不考虑类型*//*if(iVal01==iVal02){ alert('相等')}else{ alert('不相等')}*//*===，考虑类型*/if(iVal01===iVal02){ alert('相等')}else{ alert('不相等')}/*!5<2将运行结果取反*/if(!5<2){ alert('小于');}else{ alert('不小于');}</script>

</head>
<body>
</body>
</html>

9.多重循环

（1）if语句

if(.....){
....
}
else if(....){
.....
}
else{
......
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>切换</title>
<style type="text/css">

div{ width: 100px; height: 300px; background-color: aqua;}</style>

</head>
<body>

<input type="button" name="" value="切换" id="ipt"><div id="div1"></div>

</body>
</html>

（2）switch语句

多重if else 语句可以换成性能更高的switch

switch (....){
case 1:
.................;
break;
case 2:
.................;
break;
case 3:
.................;
break;
case 4:
.................;
break;
default:
..................;
}