青少年编程与数学 01-008 在网页上完成计算 07课题、加法算式
编程实现加法算式。
一、加法算式
加法算式(竖式)是一种将两个或多个数按照一定的格式排列,进行加法运算的方法。这种格式通常用于手写计算,特别是当数字较大或者需要清晰展示计算步骤时。竖式加法的基本步骤如下:
-
对齐:将需要相加的数按照数位对齐,确保每一位的数字都在同一列。
-
逐位相加:从最低位(个位)开始,逐位将对应的数字相加。
-
进位:如果某一位的和超过了9,就需要将10的个位数写在下一位的和中,同时将10的十位数加到下一位的和上。这个过程称为“进位”。
-
重复:继续这个步骤,直到所有位都相加完毕。
-
结果:最后得到的数字就是加法的结果。
例如,计算 123 和 456 的和:
123
+ 456
------
579
在这个例子中,3(个位)+ 6(个位)= 9,写在结果的个位上;2(十位)+ 5(十位)+ 1(进位)= 8,写在结果的十位上;1(百位)+ 4(百位)= 5,写在结果的百位上。最终结果是579。
二、加法算式编程
编写一个网页程序,实现用户输入两个加数的加法算式(竖式)计算。要求如下:
- 功能要求:用户可以输入两个加数,点击计算按钮后生成包括进位标注的加法算式。
- 需要HTML来构建界面,CSS来设置样式,以及JavaScript来实现转换逻辑。
- 所有代码都写在一个.html文件中。
- 页面中显示中文。
- 代码中添加中文注释。
- 设计尽量美观的样式,使用暗色调背景。
- 页面元素在网页中合理居中。
- 限制输入加数的文本框只能输入数字。
- 标注进位的数字在蓝色表示,单独占用一行。
- 确保算式输出位置正确对齐。
- 用户可以多次输入加数并计算。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>加法算式</title>
<style>
body {
background-color: #222;
color: #dbc5c5;
font-family: 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 30px;
margin: 0;
}
.container {
text-align: center;
width: 40%;
}
input[type="number"] {
font-family: 'Courier New', Courier, monospace;
font-size: 30px;
width: 98%;
padding: 10px;
margin: 10px 10px;
background-color: rgb(92, 89, 82);
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
text-align: right;
letter-spacing: 10px;
}
.result {
margin-top: 20px;
padding: 10px;
font-size: 30px;
text-align: right;
letter-spacing: 10px;
}
button {
background-color: #3c413c;
color: rgb(111, 123, 93);
padding: 10px 50px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.carry {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h1>加法算式</h1>
<input type="number" id="num1" placeholder="请输入第一个加数">
<input type="number" id="num2" placeholder="请输入第二个加数">
<button onclick="calculate()">点击此按钮开始计算</button>
<div id="result" class="result"></div>
</div>
<script>
function calculate() {
const num1 = document.getElementById('num1').value;
const num2 = document.getElementById('num2').value;
if (!num1 || !num2) return alert('请输入两个数字');
let carry = '';
let result = '';
let maxLen = Math.max(num1.length, num2.length);
let carryFlag = 0;
for (let i = 0; i < maxLen; i++) {
let digit1 = parseInt(num1[num1.length - 1 - i] || '0', 10);
let digit2 = parseInt(num2[num2.length - 1 - i] || '0', 10);
let sum = digit1 + digit2 + carryFlag;
carryFlag = Math.floor(sum / 10);
result = (sum % 10) + result;
if (i < maxLen - 1) {
carry = carryFlag + carry;
}
}
if (carryFlag > 0) {
result = carryFlag + result;
carry = carryFlag + carry;
}
let before = '';
for (let i = 0; i < maxLen - num2.length; i++) {
before = before + ' ';
}
carry = carry + '0';
document.getElementById('result').innerHTML = `
<p>${num1}</p>
<p>+${before + num2}</p>
<p class="carry">${carry}</p>
<hr>
<p>${result}</p>
`;
}
</script>
</body>
</html>
显示效果:
说明:
- HTML结构:定义了输入框、按钮和结果展示区。
- CSS样式:设置了整体的布局和颜色风格,确保页面元素居中显示。
- JavaScript逻辑:
- 获取用户输入的两个数字。
- 计算加法并处理进位。
- 使用HTML和CSS格式化输出结果,包括进位标注。
三、编程知识点
(一)Math.max()
Math.max()
是 JavaScript 中的一个内置函数,用于获取一组数值中的最大值。它可以接受任意数量的参数,并返回这些参数中的最大值。如果没有任何参数传递给它,则返回 -Infinity
。
语法
Math.max([value1[, value2[, ...]]])
参数
value1, value2, ...
: 要比较的数值。这些可以是数值或者可以转换为数值的表达式。
返回值
- 如果至少有一个参数,返回这些参数中的最大值。
- 如果没有参数,返回
-Infinity
。
示例
console.log(Math.max(1, 2, 3)); // 输出 3
console.log(Math.max(-5, 10, 0, 100, -100)); // 输出 100
console.log(Math.max()); // 输出 -Infinity
console.log(Math.max("a", 5, 10)); // 输出 NaN,因为 "a" 不能转换为数字
注意事项
- 如果传入非数字类型的参数(例如字符串),并且这些值无法被转换为有效的数字,那么
Math.max()
将返回NaN
。 - 如果所有参数都是非数字或者无法转换为数字的值,最终结果也是
NaN
。
应用场景
在您的加法计算器代码中,Math.max()
用来确定两个数字字符串中较长的那个,以便在计算过程中进行正确的对齐。例如:
var maxLength = Math.max(num1.length, num2.length);
这里,maxLength
将会得到 num1
和 num2
字符串长度中的较大值,这将用于后续的填充操作,确保两个数字具有相同的长度。
(二)parseInt()
parseInt()
是 JavaScript 中的一个全局函数,用于将一个字符串解析成整数。它可以接受一个字符串作为参数,并尝试将其转换为整数。如果字符串的开始部分可以被解析为一个合法的整数,则返回该整数;否则返回 NaN
。
语法
parseInt(string, radix)
参数
string
: 要解析的字符串。radix
(可选): 数字的基数,即数字系统的基础。例如,10 表示十进制,2 表示二进制等。如果不提供radix
,则默认根据字符串的前缀来确定基数(如以 “0x” 开头,则认为是十六进制)。
返回值
- 如果字符串可以被成功解析为一个整数,则返回该整数。
- 如果字符串无法被解析为一个整数,则返回
NaN
。
示例
console.log(parseInt("123")); // 输出 123
console.log(parseInt("0x1A", 16)); // 输出 26
console.log(parseInt("123abc")); // 输出 123
console.log(parseInt("abc123")); // 输出 NaN
console.log(parseInt("010", 10)); // 输出 10
console.log(parseInt("010")); // 输出 8, 因为默认按八进制解析
注意事项
- 如果字符串以非数字字符开始,则整个字符串将被视为无效,并返回
NaN
。 - 如果提供了
radix
参数,parseInt()
将忽略字符串的前缀,始终按照指定的基数进行解析。 - 在某些情况下,默认基数可能会导致意外的结果。例如,当字符串以 “0” 开头时,默认基数为 8(八进制),除非指定了不同的基数。
应用场景
在您的加法计算器代码中,parseInt()
用来将字符串形式的数字转换为整数,以便进行数学运算。例如:
var sum = parseInt(num1[i], 10) + parseInt(num2[i], 10) + carry;
这里,parseInt(num1[i], 10)
和 parseInt(num2[i], 10)
分别将 num1
和 num2
字符串中的每个字符转换为十进制整数,并进行加法运算。
(三)Math.floor()
Math.floor()
是 JavaScript 中的一个内置函数,用于返回小于或等于给定数字的最大整数。换句话说,它向下取整到最接近的整数。
语法
Math.floor(x)
参数
x
: 一个数值。
返回值
- 返回小于或等于
x
的最大整数。
示例
console.log(Math.floor(3.7)); // 输出 3
console.log(Math.floor(3.2)); // 输出 3
console.log(Math.floor(-1.2)); // 输出 -2
console.log(Math.floor(5)); // 输出 5
注意事项
- 对于正数,
Math.floor()
总是向下取整到更小的整数。 - 对于负数,
Math.floor()
同样向下取整,这意味着它实际上会返回更小的负数(即更远离零的负数)。 - 如果传递的参数不是数字或无法转换为数字,则
Math.floor()
会返回NaN
。
应用场景
在您的加法计算器代码中,Math.floor()
用来处理进位逻辑。当两个数字相加的结果大于或等于 10 时,需要将结果分解为个位数和进位数。Math.floor()
用于计算进位数。例如:
var sum = parseInt(num1[i], 10) + parseInt(num2[i], 10) + carry;
carry = Math.floor(sum / 10);
这里,Math.floor(sum / 10)
会计算出 sum
除以 10 后向下取整的结果,即进位数。
(四)padStart()
padStart()
是 JavaScript 字符串方法之一,用于在字符串的开头添加特定的字符,直到达到指定的长度。如果原字符串的长度已经达到了指定的长度,则不会进行任何填充。
语法
str.padStart(targetLength[, padString])
参数
targetLength
: 目标字符串的总长度。padString
(可选): 用来填充的字符串。如果省略此参数,则默认使用空格进行填充。
返回值
- 返回一个新的字符串,该字符串是在原字符串前面添加了足够的填充字符后形成的。
示例
console.log("123".padStart(5)); // 输出 " 123"
console.log("123".padStart(5, "0")); // 输出 "00123"
console.log("123".padStart(2)); // 输出 "123" (原字符串长度已经足够)
console.log("123".padStart(5, "abc")); // 输出 "ab123"
注意事项
- 如果
targetLength
小于原字符串的长度,则返回原字符串不变。 - 如果
padString
的长度超过了需要填充的长度,则只会使用padString
的前几个字符来进行填充。 padString
可以包含任何字符,包括空格和其他特殊字符。
应用场景
在您的加法计算器代码中,padStart()
用来确保两个数字具有相同的长度,以便在计算过程中进行正确的对齐。例如:
num1 = num1.padStart(maxLength, '0');
num2 = num2.padStart(maxLength, '0');
这里,num1
和 num2
都会被填充到 maxLength
的长度,不足的部分在字符串的左侧用 “0” 填充。
四、加法算式编程的意义价值
- 加深理解加法计算的规则和过程。
- 有效的逻辑思维训练。把一个手动计算过程变成程序中的算法,不是一个简单容易的事,是训练思维能力的很多的实例。
- 编程语言巩固。通过实际问题的应用编程,才能知道哪些编程语言提供的功能是怎么用的。在实际编程过程中逐渐理解需求引导的重要性,在实际需要面前,问题是必须解决的,不是有什么材料或工具就干什么活。
自此,逐渐形成将数学问题与编程紧密地联系起来的习惯,既加深对数学问题的理解,又掌握了编程方法与技巧。