第7章 JavaScript程序设计基础
习题解答
编程题
1. 已知圆的半径是100，计算圆的周长和面积，如图 7-46 所示。
思路分析
这道题很基础，就像数学课上的公式套用。我们需要用到两个公式：
- 周长 = 2 × π × r
- 面积 = π × r × r
在 JavaScript 里，圆周率 π 可以用 Math.PI 获取（约等于 3.14159），这比我们手动写 3.14 精确多了。输出结果用 document.write() 写到页面上就好。
看截图里的输出，周长是 628.32，面积是 31415.93，说明结果保留了两位小数，所以我们要用 toFixed(2) 来控制小数位数。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算圆的周长和面积</title>
<script type="text/javascript">
var r = 100; // 半径
var C = 2 * Math.PI * r; // 周长公式
var S = Math.PI * r * r; // 面积公式
document.write("圆的半径为" + r + "<br>");
document.write("圆的周长为" + C.toFixed(2) + "<br>");
document.write("圆的面积为" + S.toFixed(2));
</script>
</head>
<body>
</body>
</html>代码要点：
Math.PI是 JavaScript 内置的数学常量，代表圆周率，比手写 3.14 精确得多。toFixed(2)是 Number 类型的方法，把数字四舍五入保留指定位数的小数，返回值是字符串。- 脚本放在
<head>中，页面加载时就会执行document.write()，把结果写到页面上。 - 用
"<br>"实现换行，因为document.write()输出的是 HTML 内容。
参见 7.8.1 数学对象（Math.PI）、7.5.1 顺序结构语句（document.write）
2. 使用多重循环在网页中输出乘法口诀表，如图 7-47 所示。
思路分析
乘法口诀表大家从小就背过，现在我们用代码把它"画"出来。仔细看截图：
- 一共 9 行，第 i 行有 i 个算式（第1行1个，第2行2个...第9行9个）。
- 每个格子的内容是
j x i = j*i的格式。 - 整个表格用 HTML 的
<table>来呈现，每一行是<tr>，每个算式是<td>。
核心就是双重 for 循环——外层循环控制行（i 从 1 到 9），内层循环控制列（j 从 1 到 i）。这是一个非常经典的嵌套循环练习。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>输出乘法口诀表</title>
</head>
<body>
<script type="text/javascript">
document.write("<table border='1'>");
for (var i = 1; i <= 9; i++) { // 外层：控制行
document.write("<tr>");
for (var j = 1; j <= i; j++) { // 内层：控制列，j 最多到 i
document.write("<td>" + j + "x" + i + "=" + (i * j) + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>代码要点：
- 双重循环：外层
i控制行数（1~9），内层j控制每行的列数（1~i）。关键在于内层循环的终止条件是j <= i，这样第 i 行就只输出 i 个算式。 i * j加了括号——因为在字符串拼接（+）中，不加括号会被当成字符串连接而不是乘法运算。- 用
<table border='1'>创建带边框的表格，注意在document.write()里嵌套 HTML 时，HTML 属性要用单引号（因为外面已经用了双引号）。 - 每次外层循环开始输出
<tr>（新的一行），内层循环结束后输出</tr>（行结束）。
参见 7.5.3 循环结构语句（for 循环嵌套）
3. 在页面中用中文显示当天的日期和星期，如图 7-48 所示。
思路分析
看截图中的效果：今天是2020年5月21日星期四。我们需要用 JavaScript 的 Date 对象获取当前日期，然后拼成中文格式。
Date 对象能给我们年、月、日、星期几等信息，但有两个小坑需要注意：
getMonth()返回的月份是从 0 开始的（0 表示 1 月，11 表示 12 月），所以要+1。getDay()返回的是 0~6 的数字（0 是星期日，1 是星期一...6 是星期六），需要我们自己转换成中文。
转换星期的最优雅做法是用一个数组做映射：把"日一二三四五六"放进数组，用 getDay() 的返回值做下标直接取值。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>当天的日期和星期</title>
</head>
<body>
<script type="text/javascript">
var d = new Date(); // 创建当前日期对象
var year = d.getFullYear(); // 四位数年份
var month = d.getMonth() + 1; // 月份（+1 因为从0开始）
var date = d.getDate(); // 日
var day = d.getDay(); // 星期几（0~6）
// 用数组把数字映射为中文星期
var weekDays = ["日", "一", "二", "三", "四", "五", "六"];
document.write("今天是" + year + "年" + month + "月" + date + "日"
+ "星期" + weekDays[day]);
</script>
</body>
</html>代码要点：
new Date()不传参数时，创建的是当前时间的日期对象。getFullYear()返回四位年份（如 2026），别用已废弃的getYear()。getMonth() + 1是初学者最容易忘的坑！记住：JavaScript 的月份从 0 开始。- 用数组
weekDays做星期映射，比写一堆if...else或switch简洁得多。getDay()返回 0 时取到 "日"，返回 1 时取到 "一"，刚好对应。
参见 7.8.3 日期对象（Date 对象的创建和方法）、7.8.4 数组对象
4. 在网页中显示一个工作中的数字时钟，如图 7-49 所示。
思路分析
看截图：页面上有一个大标题"时钟提醒"，下面显示 14:54:23 这样的实时时间。"实时"意味着时间要每秒自动更新，不能只显示一次就不动了。
实现的关键有两个：
- 获取当前时间：用 Date 对象的
getHours()、getMinutes()、getSeconds()。 - 定时刷新：用
setInterval()每隔 1000 毫秒（1秒）调用一次更新函数。
另外，时分秒如果是个位数（比如 9 点 5 分 3 秒），要补零显示成 09:05:03，这样看起来更规范。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时走动的数字时钟</title>
<style>
body { text-align: center; }
h1 { margin-top: 40px; }
#clock {
font-size: 36px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>时钟提醒</h1>
<div id="clock"></div>
<script type="text/javascript">
function showTime() {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
// 补零：个位数前面加 "0"
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
document.getElementById("clock").innerHTML = h + ":" + m + ":" + s;
}
showTime(); // 页面加载时先执行一次
setInterval(showTime, 1000); // 每1000毫秒（1秒）执行一次
</script>
</body>
</html>代码要点：
setInterval(函数名, 毫秒数)是一个定时器，每隔指定时间重复执行函数。1000 毫秒 = 1 秒，所以时钟每秒更新一次。条件 ? 值1 : 值2是三元运算符（条件表达式），相当于简写的 if...else。这里用来判断：如果小于 10 就在前面补个 "0"。- 用
getElementById("clock").innerHTML修改页面上已有元素的内容，而不是用document.write()——因为document.write()在页面加载完毕后调用会覆盖整个页面。 - 先调用一次
showTime()再启动定时器，否则页面刚打开时会有 1 秒钟的空白。
参见 7.8.3 日期对象、7.4.4 运算符和表达式（条件运算符）
5. 设计简易计算器，实现四则运算，如图 7-50 所示。
思路分析
看截图：页面上有"第一个数"和"第二个数"两个输入框，四个运算按钮（+ - * /），以及一个"计算结果"的显示区域。输入 100 和 200，点击"+"，结果显示 300。
这道题综合了我们学过的多个知识点：
- 表单输入：用
<input>获取用户输入。 - 事件处理：点击按钮触发
onclick事件，调用计算函数。 - DOM 操作：用
getElementById().value获取和设置输入框的值。 - 类型转换：输入框获取的值是字符串，必须用
parseFloat()转成数字才能做数学运算。
四个按钮可以分别调用四个函数，也可以调用同一个函数并传入运算符参数。这里我们用传参的方式，代码更简洁。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<style>
body { text-align: center; margin-top: 20px; }
h2 { margin-bottom: 15px; }
p { margin: 8px 0; }
input[type="text"] { width: 200px; height: 28px; }
input[type="button"] {
width: 30px; height: 30px;
margin: 2px;
cursor: pointer;
}
</style>
<script type="text/javascript">
function calc(op) {
// 1. 获取两个输入框的值，并转换为浮点数
var n1 = parseFloat(document.getElementById("n1").value);
var n2 = parseFloat(document.getElementById("n2").value);
var result;
// 2. 根据运算符执行对应的计算
switch (op) {
case "+": result = n1 + n2; break;
case "-": result = n1 - n2; break;
case "*": result = n1 * n2; break;
case "/":
if (n2 === 0) {
result = "除数不能为0";
} else {
result = n1 / n2;
}
break;
}
// 3. 将结果显示到结果输入框
document.getElementById("result").value = result;
}
</script>
</head>
<body>
<h2>简易计算器</h2>
<p>第一个数<input type="text" id="n1"></p>
<p>第二个数<input type="text" id="n2"></p>
<p>
<input type="button" value="+" onclick="calc('+')">
<input type="button" value="-" onclick="calc('-')">
<input type="button" value="*" onclick="calc('*')">
<input type="button" value="/" onclick="calc('/')">
</p>
<p>计算结果<input type="text" id="result" readonly></p>
</body>
</html>代码要点：
parseFloat()将字符串转为浮点数。如果用parseInt()则只能处理整数。输入框的.value永远是字符串类型，不转换直接做+运算会变成字符串拼接（比如 "100" + "200" = "100200"）。switch语句根据运算符op的值选择不同的计算分支，每个case后别忘了break，否则会"穿透"执行下一个 case。- 除法时要判断除数是否为 0，这是一个好习惯。虽然 JavaScript 中除以 0 不会报错（结果是
Infinity），但给用户提示更友好。 - 结果输入框加了
readonly属性，只能看不能改，防止用户误操作。 - 四个按钮都调用同一个
calc()函数，通过传入不同参数（'+'、'-'、'*'、'/'）来区分运算，比写四个函数更优雅。
参见 7.5.2 条件选择结构语句（switch）、7.6 函数、7.5.1 顺序结构语句（输入输出）