JavaScript前端开发程序设计项目式教程课件 项目4 项目4 计算个人所得税-JavaScript函数

项目4计算个人所得税——JavaScript函数随着个人所得税年度汇算清缴工作的启动，不少老师在计算税额时需要反复核对规则，过程较为烦琐。为此，李老师计划开发一款个人所得税计算的网页工具，并邀请张华共同参与开发，以帮助大家快速、准确地完成个税计算与查询。该工具的计算逻辑严格依据2019年1月1日起实施的《中华人民共和国个人所得税法》，个税年度起征点为60000元（折合每月5000元），计算需先确定应纳税所得额，计算公式为应纳税所得额=个人年收入

-60000元（起征点金额）-年度社会保险等扣除金额-年度专项附加扣除金额确定应纳税所得额后，再根据其金额范围匹配适用税率和速算扣除数，最终通过公式计算应纳税额：应纳税额=应纳税所得额×适用税率-速算扣除数情境导入

情境导入表4-1个人所得税税率计算级数应纳税所得额税率/%速算扣除数/元1不超过36000元的30236000元～144000元的部分1025203144000元～300000元的部分20169204300000元～420000元的部分25319205420000元～660000元的部分30529206660000元～960000元的部分35859207超过960000元的部分45181920单击页面上的“计算个人所得税”按钮，如图所示，实现效果如图所示。情境导入■

理解函数的基本概念及其在编程中的作用。■

掌握核心预定义函数（如消息对话框函数、数值处理函数、字符串处理函数）的作用和使用方法。■

熟悉自定义函数的声明、调用方式，以及函数的参数和返回值的设置方法。■

掌握函数表达式、匿名函数以及箭头函数的基础用法，了解箭头函数的语法规则与适用场景。■

能够正确使用预定义函数解决编程中的实际问题。■

能够独立声明和调用自定义函数，正确处理函数的参数传递（形象实参匹配）与返回值获取。■

能够运用函数表达式、匿名函数和箭头函数的基础写法实现简单功能。■

培养读者的逻辑思维能力，使其能够合理分解问题，通过函数调用实现模块化编程。■

提升读者的自主学习和解决问题的能力，鼓励读者在遇到问题时主动查找资料、尝试不同的方法。■

培养读者的模块化编程思维，使其能够将复杂功能拆解为独立函数，提升代码的可维护性与复用性。任务4.2使用预定义函数任务4.3使用自定义函数任务4.4运用函数进阶任务4.1认识函数认识函数任务4.1函数是指由一行或多行语句组成的，能够实现某一特定功能的语句序列语句序列是一个整体，也叫函数体函数运行的结果有多种形式，例如，可以利用函数输出文本，也可以输出数值，还可以为主程序返回值JavaScript中的函数大致可以分为两种：预定义函数（或称为内置函数）自定义函数任务4.1认识函数函数有两大特点：一是它的重用性，在程序设计中如果要多次实现某一功能，就可以将实现该功能的代码定义为一个函数，在使用时可以直接调用该函数，不必重写代码，从而实现代码的重用；二是可降低程序的复杂度，通过函数可以将较大的程序分解成几个较小的程序段，也就是说可以把一个较复杂的大任务分解成几个较容易解决的小任务，降低整个程序的复杂度。任务4.1认识函数【任务实践4-1】展示个人信息——函数的使用在网页上展示个人信息，包括姓名、学号、专业等。任务目标任务分析声明变量来存储个人信息，包括姓名、学号和专业等。使用document.write()函数来将这些信息输出到网页上。【任务实践4-1】展示个人信息——函数的使用

<script>

//声明并初始化变量

letname="张华";

letstuNum="2024030303";

letmajor="计算机网络技术";

lethometown="山东潍坊";

//使用document.write()函数输出信息

document.write("我是"+name+"，学号是"+stuNum+"，我的专业是"+major+"，我来自"+hometown+"。");

</script>使用预定义函数任务4.2

在JavaScript中，预定义函数是系统为我们准备好的、可以直接调用的函数。这些函数可以帮助我们快速实现一些常见的功能，提高编程效率。常用的预定义函数主要包括消息对话框函数数值处理函数字符串处理函数任务4.2使用预定义函数在JavaScript中，消息对话框函数本质上是由JavaScript的内置对象的方法实现的，它能够将程序执行的结果在页面上以对话框的形式直观地显示出来。消息对话框在JavaScript中应用很广泛，经常用来在页面上输出结果、接收通过键盘输入的数据、实现程序与用户的交互等。JavaScript程序中常用的消息对话框有警示对话框确认对话框提示对话框4.2.1消息对话框函数1.警示对话框函数使用alert()函数可以弹出警示对话框。alert()的功能是直接在页面上以对话框的形式输出字符串或者变量的值。

alert()函数除了输出字符串和变量外，警示对话框中还有一个“确定”按钮，单击这个“确定”按钮会关闭警示对话框。4.2.1消息对话框函数alert(显示内容);【任务实践4-2】新学期寄语——警示对话框制作一个新学期寄语页面，当用户打开页面时，会弹出一个警示对话框，显示新学期寄语内容。任务目标任务分析声明变量，保存姓名和新学期寄语。使用警示对话框在页面上输出内容。【任务实践4-2】新学期寄语——警示对话框

<scripttype="text/javascript">

letsName="张华";

letiQuote="新学期，新起点，愿你扬帆起航，勇往直前！";

alert(sName+"，新学期寄语：\n"+iQuote);

</script>2.确认对话框函数

使用confirm()函数可以显示确认对话框

确认对话框的功能同警示对话框功能十分相似，不同之处是，确认对话框有“确定”“取消”两个按钮，并且在单击“确定”按钮后会返回布尔值true，单击“取消”按钮将返回布尔值false。4.2.1消息对话框函数confirm(确认内容);【任务实践4-3】服务协议确认——确认对话框制作一个服务协议确认对话框，根据用户的选择执行不同的操作。任务目标任务分析声明变量，保存协议。使用if…else语句，根据confirm()函数的返回值执行不同的操作。如果用户单击“确定”按钮，则弹出欢迎使用服务的提示；如果用户单击“取消”按钮，则弹出无法使用服务的提示。【任务实践4-3】服务协议确认——确认对话框

<scripttype="text/javascript">

letagreement="您是否同意相关服务协议？";

if(confirm(agreement)){

alert("感谢您的同意，欢迎使用我们的服务！");

}else{

alert("很遗憾，您未同意相关服务协议，无法使用我们的服务。");

}

</script>【任务实践4-3】服务协议确认——确认对话框3.提示对话框函数使用prompt()函数可以打开提示对话框，提示对话框不仅有“确定”“取消”两个按钮，而且提供用户可以用键盘输入的文本框，这个文本框可以实现用户与系统的交互功能。语法格式如下。

“提示部分”是提示需要输入的内容的语句，“默认结果”部分可以有，也可以没有。提示对话框是具有人机交互功能的消息对话框。4.2.1消息对话框函数prompt(提示部分[,默认结果]);【任务实践4-4】诗词接力——提示对话框让用户通过键盘输入给定诗词的下一句，并在页面上即时反馈结果。任务目标任务分析声明一个变量，存储用户输入的诗词。使用prompt()函数构建一个交互式提示对话框，引导用户输入给定诗词的下一句。【任务实践4-4】诗词接力——提示对话框

<scripttype="text/javascript">

letuserInput;

letgivenPoem="少年易老学难成";

userInput=prompt("请根据提示，写出下列诗词的下一句:\n"+givenPoem);

if(userInput==="一寸光阴不可轻"){

alert("恭喜，回答正确！");

}else{

alert("很遗憾，回答错误。");

}

</script>【任务实践4-4】诗词接力——提示对话框在JavaScript中，数值处理函数本质上是由JavaScript的内置对象的方法实现的，它能够对数据进行判断、格式化等。4.2.2数值处理函数1.isNaN()、isFinite()函数isNaN()函数用来确定一个变量是否为非数字。如果是非数字，返回true；如果是数字，则返回false。

4.2.2数值处理函数isNaN(1);//返回falseisNaN(true);//返回falseisNaN(“a”);//返回true1.isNaN()、isFinite()函数isFinite()函数用来确定一个变量是否有限，如果这个变量不是NaN、字符串、负无穷或正无穷，那么isFinite()将返回true，否则将返回false。

4.2.2数值处理函数isFinite(1);//返回trueisFinite(true);//返回trueisFinite(“a”);//返回false【任务实践4-5】数据有效性验证——isNaN()和isFinite()函数的使用验证用户输入的数据是否为合法且有限的数字。任务目标任务分析使用isNaN()函数来检测用户通过提示对话框输入的数据是否为NaN，若返回true，则表明输入的不是数字；若返回false，则初步判断输入的是数字。进一步使用isFinite()函数来确保输入的数字是有限的。使用alert()函数在页面上直观地给出验证结果。【任务实践4-5】数据有效性验证——isNaN()和isFinite()函数的使用

<scripttype="text/javascript">

letinputNumber=prompt("请输入一个有效的数字：");

if(isNaN(inputNumber)||!isFinite(Number(inputNumber))){

alert("输入无效，请确保输入的是一个有效的、有限的数字。");

}else{

alert("输入有效，您输入的数字是："+inputNumber);

}

</script>【任务实践4-5】数据有效性验证——isNaN()和isFinite()函数的使用2.parseFloat()、parseInt()函数parseFloat()和parseInt()函数分别用于将字符串转换为浮点数和整数。parseFloat()函数会解析字符串并返回一个浮点数，而parseInt()函数会返回一个整数。但是，如果字符串不以数字开头，那么这两个函数都会返回NaN。4.2.2数值处理函数parseFloat("123.45");//返回123.45parseFloat("123.4abc");//返回123.4parseFloat("abc123.45");//返回NaNparseInt("123.45");//返回123parseInt("123.45abc");//返回123parseInt(true);//返回NaN【任务实践4-6】数据格式化——parseFloat()和parseInt()函数的使用使用parseFloat()和parseInt()函数将用户输入的字符串分别转换为浮点数和整数。任务目标任务分析允许用户通过提示对话框输入数据，使用parseFloat()和parseInt()函数将字符串分别转换为浮点数和整数。使用document.write()函数在页面上输出转换结果。【任务实践4-6】数据格式化——parseFloat()和parseInt()函数的使用

<scripttype="text/javascript">

letinput=prompt("请输入要转换的数据");

letfloatValue=parseFloat(input);

letintValue=parseInt(input);

document.write(input+"格式化为浮点数是"+floatValue+"<br/>");

document.write(input+"格式化为整数是"+intValue+"<br/>");

</script>【任务实践4-6】数据格式化——parseFloat()和parseInt()函数的使用3.toString()、toFixed()函数toString()函数用来将数值型的数据转换为字符串型，也可以返回指定进制的数据（默认为十进制数据）具体如下

4.2.2数值处理函数num.toString([进制]);//如果未指定进制，将num转换为默认的十进制的字符串；如果指定进制，那么返回相应进制的数据varnum=12;document.write(num.toString());//页面显示字符串12document.write(num.toString(8));//页面显示12的八进制数143.toString()、toFixed()函数toFixed()函数用来将浮点数转换为固定小数位数的数字。具体如下：

4.2.2数值处理函数num.toFixed([位数]);//将num四舍五入，保留指定位数的小数；若省略参数，则只保留整数部分。varnum=12.5678;document.write(num.toFixed());//页面显示13document.write(num.toFixed(2));//页面显示12四舍五入并保留2位小数的结果12.57在JavaScript中，字符串处理函数同前面介绍的消息对话框函数、数值处理函数一样，都是由JavaScript的内置对象的方法实现的，字符串处理函数能够对字符串进行一定的操作。4.2.3字符串处理函数1.eval()函数eval()函数用来计算字符串中的表达式，并返回表达式的值。4.2.3字符串处理函数alert(eval("30+9/3"));返回33alert(eval("3>4"));返回falsealert(eval("6>5"));返回true【任务实践4-7】计算数学表达式——eval()函数使用eval()函数来计算用户输入的数学表达式，并展示结果。任务目标任务分析允许用户通过提示对话框输入数学表达式，使用eval()函数来计算表达式的值。利用警示对话框在页面上输出计算结果。【任务实践4-7】计算数学表达式——eval()函数

<scripttype="text/javascript">

letexpr;

expr=prompt("请输入一个数学表达式，例如5+6/2。","0");

alert(expr+"的计算结果是"+eval(expr));

</script>【任务实践4-7】计算数学表达式——eval()函数2.escape()、unescape()函数escape()函数和unescape()函数是一对互逆函数。escape()函数用于对字符串中的字符（除字母和数字）进行编码转换，转换为%AA或者%UUUU的形式。AA指的是字符ASCII的十六进制数的形式，UUUU指的是非ASCII字符（如汉字）的Unicode的形式。4.2.3字符串处理函数alert(escape("Hello，王小丽！"));//此处返回Hello%2C%u738B%u5C0F%u4E3D%uFF01alert(unescape("Hello%2C%u738B%u5C0F%u4E3D%uFF01"));//此处返回Hello，王小丽！声明自定义函数任务4.3

在编写代码时，可能会出现非常多相同的代码，或者功能类似的代码，这些代码需要重复使用。任务4.3使用自定义函数自定义函数是指根据需要自己定义的一段程序代码，具体分为两类：有名函数和匿名函数。有关匿名函数的内容将在任务4.4中进行介绍。自定义有名函数时，必须先声明函数。4.3.1声明自定义函数function函数名([参数1],[参数2]…){

函数体；

[return表达式;]}（1）function是定义函数的关键字，它的后面是函数名。函数名是必选项，且在同一作用域内必须是唯一的。命名函数遵守函数名体现其功能的规则，即函数名应做到“见名知意”。（2）参数是可选项，用于向函数传递数据。多个参数之间使用逗号进行分隔。（3）函数体是必选项，用于实现函数的功能。（4）return语句是可选项，用于返回函数执行的结果。建议将函数定义在<head>标签内或<body>标签末尾，避免因函数未定义导致报错。4.3.1声明自定义函数【任务实践4-8】计算商品总价——函数定义定义函数，计算商品总价。任务目标任务分析为了实现计算功能，函数体要用到算术表达式——总价=单价×数量。声明3个变量unitPrice、quantity和totalPrice，分别用来保存单价、数量及总价。【任务实践4-8】计算商品总价——函数定义

<scripttype="text/javascript">

functioncalculateTotalPrice(){

letunitPrice=30;//单价

letquantity=5;

//数量

lettotalPrice=unitPrice*quantity;//总价

document.write("商品的总价为："+totalPrice+"元");

}

</script>自定义函数定义好之后，就可以同内置函数一样，在程序中进行调用。一般来说，在程序中调用函数有如下3种方式。4.3.2调用自定义函数1.使用函数名调用函数在JavaScript程序中，可以直接使用函数名来调用函数。无论是内置函数还是自定义函数，调用的方法是一样的。用函数名来调用函数的形式是“函数名()”，在调用函数时后面必须加括号。4.3.2调用自定义函数printStr();2.在HTML中用超链接的方式来调用函数在HTML中，可以使用超链接（在<a>标签的href属性中使用“javascript：”）的方式来调用JavaScript函数。调用方法如下4.3.2调用自定义函数<ahref="javascript:函数名(参数)">…</a>3.在事件处理中用与事件结合的方式调用函数在事件处理中，可以将JavaScript函数作为事件处理函数来调用。当触发事件时会自动调用指定的JavaScript函数。4.3.2调用自定义函数【任务实践4-9】计算商品总价——使用函数名调用函数通过直接使用函数名调用任务实践4-8中定义的函数来计算商品总价。任务目标任务分析在<script>标签中调用函数。注意，调用函数的操作要在定义函数之后进行。【任务实践4-9】计算商品总价——使用函数名调用函数

<scripttype="text/javascript">

functioncalculateTotalPrice(){

letunitPrice=30;//单价

letquantity=5;

//数量

lettotalPrice=unitPrice*quantity;//总价

document.write("商品的总价为："+totalPrice+"元");

}

calculateTotalPrice();//直接调用函数

</script>【任务实践4-10】计算商品总价——使用超链接调用函数通过超链接调用任务实践4-8中定义的函数来计算商品总价。任务目标任务分析调用任务实践4-9中的同一个自定义函数，不过调用方式不同，这里通过超链接来调用函数。【任务实践4-10】计算商品总价——使用超链接调用函数<head>

<metacharset="utf-8">

<title>计算商品总价——通过超链接调用函数</title>

<scripttype="text/javascript">

functioncalculateTotalPrice(){

letunitPrice=30;//单价

letquantity=5;

//数量

lettotalPrice=unitPrice*quantity;//总价

document.write("商品的总价为："+totalPrice+"元");

}

</script></head><body>

<ahref="javascript:calculateTotalPrice();">计算商品总价</a></body>【任务实践4-10】计算商品总价——使用超链接调用函数JavaScript函数在定义和调用时是可以有参数和返回值的。1.函数的参数创建自定义函数时，可以在函数名后的括号中指定参数，这些参数在函数被调用时接收传入的值。4.3.2函数的参数和返回值function函数名([参数1],[参数2]…){

函数体；

[return表达式;]}1.函数的参数我们把定义函数时指定的参数称为形式参数，简称形参；而把调用函数时为形参实际传递值的参数称为实际参数，简称实参。如果定义的函数中有参数，那么调用这种函数的方式如下所示4.3.2函数的参数和返回值函数名(实参1,实参2,…);【任务实践4-11】计算任意商品总价——有参函数通过定义有参函数计算商品的总价任务目标任务分析为了计算任意数量和单价的商品总价，定义有参函数，这样的程序更加通用和灵活。定义函数时设置两个形参：unitPrice（单价）和quantity（数量）。函数内部将计算总价，即unitPrice*quantity。调用函数时，提供具体的商品单价和购买数量作为实参。【任务实践4-11】计算任意商品总价——有参函数

<scripttype="text/javascript">

//定义有参函数

functioncalculateTotalPrice(unitPrice,quantity){

lettotalPrice=unitPrice*quantity;//总价

document.write("商品的总价为："+totalPrice+"元");

}

calculateTotalPrice(23,5);

</script>【任务实践4-11】计算任意商品总价——有参函数2.函数的返回值函数的返回值是指函数在调用后获得的数据。在定义函数时，可以为函数指定一个返回值，函数的返回值可以是任何类型的数据。在JavaScript中使用return语句得到返回值并退出函数。这条语句的作用是结束函数体的执行，并把表达式的值作为函数的返回值。4.3.2函数的参数和返回值return表达式;【任务实践4-12】计算两个成绩的平均值——return语句的简单应用定义一个函数，用于计算两个成绩的平均值，并通过return语句返回结果。任务目标任务分析用户输入两个成绩。定义函数计算这两个成绩的平均值，接收用户输入的两个成绩作为参数。函数返回计算出的平均值。【任务实践4-12】计算两个成绩的平均值——return语句的简单应用

<scripttype="text/javascript">

functioncalculateAverage(score1,score2){

letaverage=(score1+score2)/2;

returnaverage;//返回两个成绩的平均值

}

letscore1=parseFloat(prompt("请输入第一个成绩:"));

letscore2=parseFloat(prompt("请输入第二个成绩:"));

letaverageScore=calculateAverage(score1,score2);

alert("两个成绩的平均值为："+averageScore);

</script>【任务实践4-12】计算两个成绩的平均值——return语句的简单应用在函数内部，变量的作用域规则尤为关键，直接影响到数据的封装、生命周期及避免冲突。ES6引入let和const后，JavaScript在函数内部存在两种主要的局部作用域机制。4.3.4变量的作用域（函数/块级）特性函数作用域（var）块级作用域（let/const）作用范围整个函数体（含嵌套块）仅声明所在的代码块

{}

(如

if、for、while)声明位置可在全局环境或函数内任意位置声明（全局声明对应全局作用域，函数内声明对应函数作用域）可在全局环境或代码块内（如if、for、{}）声明（全局声明对应全局块级作用域，代码块内声明对应局部块级作用域）提升（Hoisting）变量声明提升至函数顶部（初始为undefined）存在暂时性死区（TemporalDeadZone，TDZ），声明前访问会报错重复声明允许在同一函数内重复声明同名变量（易导致覆盖）禁止在同一块内重复声明同名变量

（编译时报错）生命周期随函数执行结束而销毁随代码块执行结束而销毁【任务实践4-13】输出变量的值——变量的作用域通过代码运行结果，直观感受全局作用域、函数作用域（局部）和块级作用域的差异。任务目标任务分析声明全局变量a并赋值，观察其在函数内外的访问结果。在函数内用var声明同名变量a（函数作用域），验证“遮蔽”现象及函数内外的访问差异。在for循环中用let声明同名变量a（块级作用域），验证其仅在循环块内有效的特性。最终验证全局变量a的值是否不受局部变量影响。【任务实践4-13】输出变量的值——变量的作用域

<scripttype="text/javascript">

//1.声明全局变量a（全局作用域）

vara="我是全局变量";

document.write("初始全局变量a："+a+"<br>");//输出全局变量

//2.定义函数，内部声明同名函数作用域变量a

functiontestScope(){

vara="我是局部变量（函数作用域）";//函数内用var声明，仅在函数内可见

document.write("函数内部的a："+a+"<br>");//优先访问函数内变量（遮蔽全局变量）

}

//调用函数，执行函数内逻辑

testScope();【任务实践4-13】输出变量的值——变量的作用域

//3.函数外部访问a（仍为全局变量）

document.write("函数外部的a："+a+"<br>");

//4.用let在for循环块内声明同名变量a（块级作用域）

document.write("-----循环内的块级变量a-----<br>");

for(leta=0;a<2;a++){

document.write("循环内部的a："+a+"<br>");//仅在循环块内可见

}

//5.循环外部访问a（仍为全局变量）

document.write("-----循环外部的a-----<br>");

document.write("循环外部的a："+a+"<br>");

</script>函数的嵌套是指在一个函数内包含另外一个函数。在JavaScript中，一个函数体内的语句可以调用另外一个函数，这就是函数的嵌套调用。在函数嵌套调用时，被调用的函数应该先写好，否则不能完成函数的嵌套调用。4.3.5函数的嵌套【任务实践4-14】计算累加和——函数嵌套的应用

使用函数嵌套来计算一个特定数列的累加和。任务目标任务分析编写一个函数sumToN()来计算1～n的累加和。编写另一个函数totalSum()来嵌套调用函数sumToN()，并累加每个子数列的和。【任务实践4-14】计算累加和——函数嵌套的应用函数进阶任务4.4函数表达式是指将声明的函数赋值给一个变量，通过变量完成函数的调用。自定义函数通常是通过function关键字明确声明的函数，而函数表达式则是将函数赋值给变量或属性的表达式形式4.4.1函数表达式varfn=functiongetSum(num1,num2){returnnum1+num2;};fn(2,4);顾名思义，匿名函数就是没有名称的函数，它是函数表达式的另一种形式。匿名函数在函数表达式的基础上去掉了函数名。观察匿名函数的调用，通过“变量名(

)”的形式，可以将整个function部分替换成“变量名”，于是就有了如下的自调用方式。4.4.2匿名函数//匿名函数的自调用方式

function(num1,num2){returnnum1+num2;}(4,5);ES6中新引入了一种匿名函数，称为箭头函数。使用ES6箭头函数语法定义函数，需将原函数的function关键字删掉，并使用“=>”连接参数列表和函数体。4.4.3箭头函数箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种核心格式，对应不同的函数体场景。●

单表达式函数体：函数体仅包含一条表达式时，可省略花括号{}和return关键字，表达式结果会被隐式返回。●多语句函数体：函数体包含多条语句时，必须用花括号{}包裹，若需返回值，则需显式使用return。4.4.3箭头函数【任务实践4-15】绘制星号三角形图案——箭头函数使用箭头函数来绘制一个由星号组成的三角形图案。任务目标任务分析定义一个箭头函数drawTriangle()，它接收一个参数n，代表三角形图案的层数。函数内部使用嵌套的循环来输出相应层数的三角形图案。使用prompt()函数来获取用户输入的层数，并调用drawTriangle()函数来绘制三角形图案。【任务实践4-15】绘制星号三角形图案——箭头函数

<scripttype="text/javascript">

constdrawTriangle=n=>{

for(leti=1;i<=n;i++){

//打印空格

for(letj=1;j<=n-i;j++){

document.write("  ");

}

//打印星号

for(letk=1;k<=i;k++){

document.write("*");

document.write("  ");

}

//换行

document.write("<br/>");

}

};

constnum=prompt("请输入三角形图案的层数","3");

drawTriangle(parseInt(num,10));//将输入的字符串转换为整数

</script>【能力提升】闭包函数闭包函数是指能够访问另一个函数作用域中的变量的函数。也就是说，当一个函数返回另一个内层函数，且该内层函数引用了外层函数内部的变量时，就产生了闭包。functionfn1(){vara=1;functionfn(){a++;console.log(a);//输出2}returnfn;}【能力提升】闭包函数利用这种嵌套方式产生的函数就是闭包函数，闭包函数的作用是让内层函数能够访问外层函数的局部变量，外层函数执行完毕，其局部变量因被内层函数引用而不会被垃圾回收机制销毁。调用上述函数的代码如下。functionfn1(){varx=fn1();x(); //结果是2x(); //结果是3根据项目要求，编写函数计算个人所得税。由于应纳税所得额的判断条件是连续的范围区间（如“不超过

36000

元”“36000

元至

144000

元”等），将个税计算逻辑封装为函数，结合

if…elseif…else多分支结构，既能实现代码复用，又能让逻辑直观清晰，因此选择这种实现方案。项目分析1.页面布局设计项目实施<!DOCTYPEhtml><html><head>

<metacharset="utf-8">

<title>个人所得税计算器</title>

<style>

/*CSS样式将在此处定义*/

</style></head><body>

<pstyle="text-align:center;">

<inputtype="button"value="计算个人所得税"onclick="calculate()">

</p>

<scripttype="text/javascript">

//JavaScript代码将在此处定义

</script></body></html>2.页面美化设计项目实施

<style>

p{