青少年编程与数学 01-008 在网页上完成计算 07课题、加法算式-CSDN博客

本文链接：https://blog.csdn.net/qq_40071585/article/details/140943477

青少年编程与数学 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 + '&nbsp;';
            }
            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” 填充。

四、加法算式编程的意义价值

加深理解加法计算的规则和过程。
有效的逻辑思维训练。把一个手动计算过程变成程序中的算法，不是一个简单容易的事，是训练思维能力的很多的实例。
编程语言巩固。通过实际问题的应用编程，才能知道哪些编程语言提供的功能是怎么用的。在实际编程过程中逐渐理解需求引导的重要性，在实际需要面前，问题是必须解决的，不是有什么材料或工具就干什么活。

自此，逐渐形成将数学问题与编程紧密地联系起来的习惯，既加深对数学问题的理解，又掌握了编程方法与技巧。