JS入门到精通 第4章 函数
导读：一、练习1. 练习1 （1）源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数参数的使用</title> <script type...
一、练习
1. 练习1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数参数的使用</title>
<script type="text/javascript">
function show(bookname,author){
alert("图书名称："+bookname+"\n图书作者："+author);
}
</script>
</head>
<body>
<script type="text/javascript">
show("零基础学JavaScript","明日科技");
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_1/
（3）Tips
全是语法错误，莫名其妙又好了。
2. 练习2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算购物车中商品总价</title>
</head>
<body>
<script type="text/javascript">
function price(unitPrice,number){
var totalPrice=unitPrice*number;//计算单个商品总价
return totalPrice;//返回单个商品总价
}
var phone = price(5000,2);//调用函数，计算手机总价
var computer = price(4000,10);//调用函数，计算笔记本电脑总价
var total=phone+computer;//计算所有商品总价
alert("购物车中商品总价："+total+"元");//输出所有商品总价
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_2/
（3）Tips
后面的能搞定吗？
3. 练习3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数调函数</title>
<script type="text/javascript">
function getAverage(score1,score2,score3){
var average=(score1+score2+score3)/3;
return average;
}
function getResult(score1,score2,score3){
document.write("3个评委给出的分数分别为："+score1+"分、"+score2+"分、"+score3+"分<br>");
var result=getAverage(score1,score2,score3);
document.write("周星星的最后得分为："+result+"分");
}
</script>
</head>
<body>
<script type="text/javascript">
getResult(91,89,93);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_3/
（3）Tips
小意思。
4. 练习4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匿名函数</title>
</head>
<body>
<script type="text/javascript">
var star=function(n){
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
// document.write("<br>i="+i);
// document.write("<br>j="+j);
// document.write("<br>n-i="+(n-i));
//
document.write(" ");//输出空格
}
for(var j=1; j<=i; j++){//定义内层for循环语句
document.write("* ");//输出*和空格
}
document.write("<br>");//输出换行标记
}
}
star(6);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_4/
（3）Tips
还是有点别。
二、编程训练
1. 训练1
（1）源代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无聊</title>
<script type="text/javascript">
function address(province,city,area,detailed){
document.write(province+city+area+detailed);
}
</script>
</head>
<body>
<h2>请核对您的收货地址</h2>
<script type="text/javascript">
address("吉林省","长春市","朝阳区","工农大路51号");
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_5/
（3）Tips
我要实质。
2. 训练2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对值函数</title>
<script type="text/javascript">
function getAbs(num){
if(num<0){
alert(num+"的绝对值是"+num*-1);
}else{
alert(num+"的绝对值是"+num);
}
}
</script>
</head>
<body>
<script type="text/javascript">
getAbs(-20);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_6/
（3）Tips
难以理解。
3. 训练3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较大小</title>
</head>
<body>
<script type="text/javascript">
function compare(n1,n2){
var result="";
if(n1>n2){
result=n1+"大于"+n2;
}else if(n1<n2){
result=n1+"小于"+n2;
}else{
result=n1+"等于"+n2;
}
return result;
}
alert(compare(15,16));
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_7/
（3）Tips
哎呀，还是写写吧。
4. 训练4
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较最小值</title>
</head>
<body>
<script type="text/javascript">
function getMinValue(num1,num2,num3){
var minValue=num1;
if(num2<minValue){
minValue=num2;
}
if(num3<minValue){
minValue=num3;
}
return minValue;
}
alert("12、10、15三个数字的最小值为"+getMinValue(12,10,15));
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_8/
（3）Tips
skill记住了。
5. 训练5
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直接输出</title>
</head>
<body>
<script type="text/javascript">
function getTotalPrice(price1,price2,price3){
var totalPrice=price1+price2+price3;
return totalPrice;
}
function getResult(price1,price2,price3){
var result=getTotalPrice(price1,price2,price3);
document.write("该顾客一共消费"+result+"元<br>");
if(result>=500){
document.write("该顾客可以享受9折优惠");
}else{
document.write("该顾客不可以享受9折优惠");
}
}
getResult(199,156,165);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_9/
（3）Tips
skill加1。
6. 训练6
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>还是计算</title>
</head>
<body>
<script type="text/javascript">
function getTotalScore(math,chinese,english,comprehensive){
var totalScore=math+chinese+english+comprehensive;
return totalScore;
}
function getResult(math,chinese,english,comprehensive){
var result=getTotalScore(math,chinese,english,comprehensive);
document.write("该考生高考总分为："+result+"分<br>");
if(result>=550){
document.write("该考生成绩达到了本科分数线");
}else{
document.write("该考生成绩未达到本科分数线");
}
}
getResult(106,116,123,236);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_10/
（3）Tips
跟上一个如出一辙。
7. 训练7
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录验证</title>
</head>
<body>
<script type="text/javascript">
var isLogin=function(username,pwd){
if(username=='mr' && pwd=='mrsoft'){
alert("登录成功！");
}else{
alert("微信号或密码不正确！");
}
}
isLogin("mr","mrsoft");
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_11/
（3）Tips
学会匿名函数的用法。
8. 训练8
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
height: 100%;/* 确保 html 和 body 的高度占满整个屏幕 */
margin: 0; /* 清除默认的页面边距，防止出现白边 */
}
body {
background-image: url('bg.gif');
background-size: cover; /* 核心：让图片等比例缩放，完全覆盖整个页面 */
background-repeat: no-repeat; /* 禁止图片平铺重复 */
background-position: center; /* 让图片在页面中居中显示 */
background-attachment: fixed; /* 可选：让背景图片在页面滚动时保持固定，视觉效果更好 */
}
</style>
<title>1000以内能同时被6和9整除的正整数</title>
</head>
<body>
<h3>1000以内能同时被6和9整除的正整数</h3>
<pre>
<script type="text/javascript">
var getNum=function(num){
if(num%6==0 && num%9==0){
return true;
}else{
return false;
}
}
var n=0;
for(var i=1;i<=1000;i++){
if(getNum(i)){
//document.write(i+"\t");
document.write(i+"\t");
n++;
if(n%7==0){
document.write("<br>");
}
}
}
</script>
</pre>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_12/
（3）Tips
我优化了。
三、实践与练习
1. 实践1
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较函数</title>
</head>
<body>
<script type="text/javascript">
function getAgeGroup(age){
var ageGroup="";
if(age>0 && age<=6){
ageGroup="童年";
}else if(age>=7 && age<=17){
ageGroup="少年";
}else if(age>=18 && age<=40){
ageGroup="青年";
}else if(age>=41 && age<=65){
ageGroup="中年";
}else{
ageGroup="老年";
}
return ageGroup;
}
var result=getAgeGroup(20);
alert("20岁正处在"+result+"时期");
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_13/
（3）Tips
怎么落下这么多？我怎么记得都写完了。
2. 实践2
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期推算</title>
</head>
<body>
<script type="text/javascript">
function output(y,m,d){
alert(y+"年"+m+"月有"+d+"天");
}
function days(y,m){
if(m==2){
if((y%4 == 0 && y%100 != 0) || (y%400 == 0)){
output(y,m,29);
}else{
output(y,m,28);
}
}else if(m == 4 || m == 6 || m == 9 || m == 11){
output(y,m,30);
}else{
output(y,m,31);
}
}
days(2026,6);
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_14/
（3）Tips
越来越清晰。
3. 实践3
（1）源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生成表格</title>
</head>
<body>
<script type="text/javascript">
function createTable(row,col,width,height,bdcolor){
var tableStr="";
tableStr=("<table style='width:"+width+"px;height:"+height +"px;border-collapse:collapse'>");
for(var i=0; i<row; i++){
tableStr+=("<tr>");
for(var j=0;j<col; j++){
tableStr+=("<td style='border:1px solid "+bdcolor+"'>你大爷</td>");
}
tableStr+=("</tr>");
}
tableStr+=("</table>");
return tableStr;
}
document.write(createTable(6,8,500,100,"red"));
</script>
</body>
</html>（2）运行页面
https://www.xinyizhishu.top/jsC/sc/4_15/
（3）Tips
按我的来。